@tedi-design-system/angular 6.5.0-rc.8 → 7.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -11
- package/community/index.d.ts +1480 -9
- package/community/index.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +570 -555
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +10409 -5530
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/index.css +1 -1
- package/index.d.ts +3 -6
- package/index.d.ts.map +1 -0
- package/package.json +7 -9
- package/tedi/index.d.ts +8379 -8
- package/tedi/index.d.ts.map +1 -1
- package/community/components/buttons/floating-button/floating-button.component.d.ts +0 -30
- package/community/components/buttons/floating-button/floating-button.component.d.ts.map +0 -1
- package/community/components/buttons/floating-button/index.d.ts +0 -2
- package/community/components/buttons/floating-button/index.d.ts.map +0 -1
- package/community/components/buttons/index.d.ts +0 -2
- package/community/components/buttons/index.d.ts.map +0 -1
- package/community/components/cards/accordion/accordion/accordion.component.d.ts +0 -25
- package/community/components/cards/accordion/accordion/accordion.component.d.ts.map +0 -1
- package/community/components/cards/accordion/accordion-icon/accordion-icon.component.d.ts +0 -7
- package/community/components/cards/accordion/accordion-icon/accordion-icon.component.d.ts.map +0 -1
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts +0 -22
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +0 -1
- package/community/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts +0 -13
- package/community/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts.map +0 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts +0 -50
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts.map +0 -1
- package/community/components/cards/accordion/index.d.ts +0 -6
- package/community/components/cards/accordion/index.d.ts.map +0 -1
- package/community/components/cards/card/card-colors.directive.d.ts +0 -13
- package/community/components/cards/card/card-colors.directive.d.ts.map +0 -1
- package/community/components/cards/card/card-content/card-content.component.d.ts +0 -25
- package/community/components/cards/card/card-content/card-content.component.d.ts.map +0 -1
- package/community/components/cards/card/card-header/card-header.component.d.ts +0 -14
- package/community/components/cards/card/card-header/card-header.component.d.ts.map +0 -1
- package/community/components/cards/card/card-padding.directive.d.ts +0 -21
- package/community/components/cards/card/card-padding.directive.d.ts.map +0 -1
- package/community/components/cards/card/card-row/card-row.component.d.ts +0 -11
- package/community/components/cards/card/card-row/card-row.component.d.ts.map +0 -1
- package/community/components/cards/card/card.component.d.ts +0 -30
- package/community/components/cards/card/card.component.d.ts.map +0 -1
- package/community/components/cards/card/index.d.ts +0 -7
- package/community/components/cards/card/index.d.ts.map +0 -1
- package/community/components/cards/index.d.ts +0 -3
- package/community/components/cards/index.d.ts.map +0 -1
- package/community/components/form/checkbox/checkbox/checkbox.component.d.ts +0 -41
- package/community/components/form/checkbox/checkbox/checkbox.component.d.ts.map +0 -1
- package/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.d.ts +0 -25
- package/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.d.ts.map +0 -1
- package/community/components/form/checkbox/checkbox-group/checkbox-group.component.d.ts +0 -26
- package/community/components/form/checkbox/checkbox-group/checkbox-group.component.d.ts.map +0 -1
- package/community/components/form/checkbox/index.d.ts +0 -4
- package/community/components/form/checkbox/index.d.ts.map +0 -1
- package/community/components/form/choicegroup/choicegroup.directive.d.ts +0 -11
- package/community/components/form/choicegroup/choicegroup.directive.d.ts.map +0 -1
- package/community/components/form/file-dropzone/constants.d.ts +0 -13
- package/community/components/form/file-dropzone/constants.d.ts.map +0 -1
- package/community/components/form/file-dropzone/file-dropzone.component.d.ts +0 -141
- package/community/components/form/file-dropzone/file-dropzone.component.d.ts.map +0 -1
- package/community/components/form/file-dropzone/file.service.d.ts +0 -16
- package/community/components/form/file-dropzone/file.service.d.ts.map +0 -1
- package/community/components/form/file-dropzone/index.d.ts +0 -5
- package/community/components/form/file-dropzone/index.d.ts.map +0 -1
- package/community/components/form/file-dropzone/types.d.ts +0 -33
- package/community/components/form/file-dropzone/types.d.ts.map +0 -1
- package/community/components/form/file-dropzone/utils.d.ts +0 -7
- package/community/components/form/file-dropzone/utils.d.ts.map +0 -1
- package/community/components/form/form-field/form-field.component.d.ts +0 -6
- package/community/components/form/form-field/form-field.component.d.ts.map +0 -1
- package/community/components/form/index.d.ts +0 -11
- package/community/components/form/index.d.ts.map +0 -1
- package/community/components/form/input/input.component.d.ts +0 -22
- package/community/components/form/input/input.component.d.ts.map +0 -1
- package/community/components/form/input-group/input-group.component.d.ts +0 -38
- package/community/components/form/input-group/input-group.component.d.ts.map +0 -1
- package/community/components/form/radio/index.d.ts +0 -4
- package/community/components/form/radio/index.d.ts.map +0 -1
- package/community/components/form/radio/radio/radio.component.d.ts +0 -30
- package/community/components/form/radio/radio/radio.component.d.ts.map +0 -1
- package/community/components/form/radio/radio-card-group/radio-card-group.component.d.ts +0 -12
- package/community/components/form/radio/radio-card-group/radio-card-group.component.d.ts.map +0 -1
- package/community/components/form/radio/radio-group/radio-group.component.d.ts +0 -40
- package/community/components/form/radio/radio-group/radio-group.component.d.ts.map +0 -1
- package/community/components/form/search/search.component.d.ts +0 -115
- package/community/components/form/search/search.component.d.ts.map +0 -1
- package/community/components/form/select/index.d.ts +0 -4
- package/community/components/form/select/index.d.ts.map +0 -1
- package/community/components/form/select/multiselect.component.d.ts +0 -115
- package/community/components/form/select/multiselect.component.d.ts.map +0 -1
- package/community/components/form/select/select-option.component.d.ts +0 -26
- package/community/components/form/select/select-option.component.d.ts.map +0 -1
- package/community/components/form/select/select.component.d.ts +0 -87
- package/community/components/form/select/select.component.d.ts.map +0 -1
- package/community/components/form/textarea/textarea.component.d.ts +0 -17
- package/community/components/form/textarea/textarea.component.d.ts.map +0 -1
- package/community/components/helpers/index.d.ts +0 -2
- package/community/components/helpers/index.d.ts.map +0 -1
- package/community/components/helpers/progress-bar/index.d.ts +0 -2
- package/community/components/helpers/progress-bar/index.d.ts.map +0 -1
- package/community/components/helpers/progress-bar/progress-bar.component.d.ts +0 -13
- package/community/components/helpers/progress-bar/progress-bar.component.d.ts.map +0 -1
- package/community/components/navigation/breadcrumbs/breadcrumbs.component.d.ts +0 -48
- package/community/components/navigation/breadcrumbs/breadcrumbs.component.d.ts.map +0 -1
- package/community/components/navigation/index.d.ts +0 -6
- package/community/components/navigation/index.d.ts.map +0 -1
- package/community/components/navigation/pagination/pagination-page/pagination-page.component.d.ts +0 -10
- package/community/components/navigation/pagination/pagination-page/pagination-page.component.d.ts.map +0 -1
- package/community/components/navigation/pagination/pagination.component.d.ts +0 -23
- package/community/components/navigation/pagination/pagination.component.d.ts.map +0 -1
- package/community/components/navigation/pagination/pagination.utils.d.ts +0 -2
- package/community/components/navigation/pagination/pagination.utils.d.ts.map +0 -1
- package/community/components/navigation/table-of-contents/index.d.ts +0 -4
- package/community/components/navigation/table-of-contents/index.d.ts.map +0 -1
- package/community/components/navigation/table-of-contents/table-of-contents-item/table-of-contents-item.component.d.ts +0 -12
- package/community/components/navigation/table-of-contents/table-of-contents-item/table-of-contents-item.component.d.ts.map +0 -1
- package/community/components/navigation/table-of-contents/table-of-contents-nested-wrapper.component.d.ts +0 -11
- package/community/components/navigation/table-of-contents/table-of-contents-nested-wrapper.component.d.ts.map +0 -1
- package/community/components/navigation/table-of-contents/table-of-contents.component.d.ts +0 -76
- package/community/components/navigation/table-of-contents/table-of-contents.component.d.ts.map +0 -1
- package/community/components/navigation/tabs/index.d.ts +0 -4
- package/community/components/navigation/tabs/index.d.ts.map +0 -1
- package/community/components/navigation/tabs/tab/tab.component.d.ts +0 -21
- package/community/components/navigation/tabs/tab/tab.component.d.ts.map +0 -1
- package/community/components/navigation/tabs/tab-content/tab-content.component.d.ts +0 -9
- package/community/components/navigation/tabs/tab-content/tab-content.component.d.ts.map +0 -1
- package/community/components/navigation/tabs/tabs.component.d.ts +0 -19
- package/community/components/navigation/tabs/tabs.component.d.ts.map +0 -1
- package/community/components/navigation/vertical-stepper/index.d.ts +0 -3
- package/community/components/navigation/vertical-stepper/index.d.ts.map +0 -1
- package/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.d.ts +0 -25
- package/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.d.ts.map +0 -1
- package/community/components/navigation/vertical-stepper/vertical-stepper.component.d.ts +0 -9
- package/community/components/navigation/vertical-stepper/vertical-stepper.component.d.ts.map +0 -1
- package/community/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts +0 -20
- package/community/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts.map +0 -1
- package/community/components/overlay/dropdown/dropdown.component.d.ts +0 -20
- package/community/components/overlay/dropdown/dropdown.component.d.ts.map +0 -1
- package/community/components/overlay/dropdown-item/dropdown-item.component.d.ts +0 -35
- package/community/components/overlay/dropdown-item/dropdown-item.component.d.ts.map +0 -1
- package/community/components/overlay/index.d.ts +0 -5
- package/community/components/overlay/index.d.ts.map +0 -1
- package/community/components/overlay/modal/footer/modal-footer.component.d.ts +0 -23
- package/community/components/overlay/modal/footer/modal-footer.component.d.ts.map +0 -1
- package/community/components/overlay/modal/header/modal-header.component.d.ts +0 -15
- package/community/components/overlay/modal/header/modal-header.component.d.ts.map +0 -1
- package/community/components/overlay/modal/index.d.ts +0 -4
- package/community/components/overlay/modal/index.d.ts.map +0 -1
- package/community/components/overlay/modal/modal.component.d.ts +0 -23
- package/community/components/overlay/modal/modal.component.d.ts.map +0 -1
- package/community/components/table/index.d.ts +0 -2
- package/community/components/table/index.d.ts.map +0 -1
- package/community/components/table/table-styles/table-styles.component.d.ts +0 -11
- package/community/components/table/table-styles/table-styles.component.d.ts.map +0 -1
- package/community/components/tags/index.d.ts +0 -3
- package/community/components/tags/index.d.ts.map +0 -1
- package/community/components/tags/status-badge/status-badge.component.d.ts +0 -57
- package/community/components/tags/status-badge/status-badge.component.d.ts.map +0 -1
- package/community/components/tags/tag/tag.component.d.ts +0 -35
- package/community/components/tags/tag/tag.component.d.ts.map +0 -1
- package/community/tedi-design-system-angular-community.d.ts.map +0 -1
- package/public-api.d.ts +0 -3
- package/public-api.d.ts.map +0 -1
- package/tedi/components/base/icon/icon.component.d.ts +0 -47
- package/tedi/components/base/icon/icon.component.d.ts.map +0 -1
- package/tedi/components/base/index.d.ts +0 -3
- package/tedi/components/base/index.d.ts.map +0 -1
- package/tedi/components/base/text/text.component.d.ts +0 -20
- package/tedi/components/base/text/text.component.d.ts.map +0 -1
- package/tedi/components/buttons/button/base-button.directive.d.ts +0 -17
- package/tedi/components/buttons/button/base-button.directive.d.ts.map +0 -1
- package/tedi/components/buttons/button/button.component.d.ts +0 -20
- package/tedi/components/buttons/button/button.component.d.ts.map +0 -1
- package/tedi/components/buttons/closing-button/closing-button.component.d.ts +0 -28
- package/tedi/components/buttons/closing-button/closing-button.component.d.ts.map +0 -1
- package/tedi/components/buttons/collapse/collapse.component.d.ts +0 -53
- package/tedi/components/buttons/collapse/collapse.component.d.ts.map +0 -1
- package/tedi/components/buttons/collapse-button/collapse-button.component.d.ts +0 -76
- package/tedi/components/buttons/collapse-button/collapse-button.component.d.ts.map +0 -1
- package/tedi/components/buttons/index.d.ts +0 -7
- package/tedi/components/buttons/index.d.ts.map +0 -1
- package/tedi/components/buttons/info-button/info-button.component.d.ts +0 -13
- package/tedi/components/buttons/info-button/info-button.component.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion/accordion.component.d.ts +0 -14
- package/tedi/components/cards/accordion/accordion/accordion.component.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion/index.d.ts +0 -2
- package/tedi/components/cards/accordion/accordion/index.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item/accordion-item.component.d.ts +0 -53
- package/tedi/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item/index.d.ts +0 -2
- package/tedi/components/cards/accordion/accordion-item/index.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts +0 -15
- package/tedi/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item-content/index.d.ts +0 -2
- package/tedi/components/cards/accordion/accordion-item-content/index.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts +0 -45
- package/tedi/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts.map +0 -1
- package/tedi/components/cards/accordion/accordion-item-header/index.d.ts +0 -2
- package/tedi/components/cards/accordion/accordion-item-header/index.d.ts.map +0 -1
- package/tedi/components/cards/accordion/index.d.ts +0 -5
- package/tedi/components/cards/accordion/index.d.ts.map +0 -1
- package/tedi/components/cards/index.d.ts +0 -2
- package/tedi/components/cards/index.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-content/carousel-content.component.d.ts +0 -80
- package/tedi/components/content/carousel/carousel-content/carousel-content.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-footer/carousel-footer.component.d.ts +0 -6
- package/tedi/components/content/carousel/carousel-footer/carousel-footer.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-header/carousel-header.component.d.ts +0 -6
- package/tedi/components/content/carousel/carousel-header/carousel-header.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-indicators/carousel-indicators.component.d.ts +0 -23
- package/tedi/components/content/carousel/carousel-indicators/carousel-indicators.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-navigation/carousel-navigation.component.d.ts +0 -11
- package/tedi/components/content/carousel/carousel-navigation/carousel-navigation.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel-slide.directive.d.ts +0 -8
- package/tedi/components/content/carousel/carousel-slide.directive.d.ts.map +0 -1
- package/tedi/components/content/carousel/carousel.component.d.ts +0 -8
- package/tedi/components/content/carousel/carousel.component.d.ts.map +0 -1
- package/tedi/components/content/carousel/index.d.ts +0 -8
- package/tedi/components/content/carousel/index.d.ts.map +0 -1
- package/tedi/components/content/index.d.ts +0 -5
- package/tedi/components/content/index.d.ts.map +0 -1
- package/tedi/components/content/list/list.component.d.ts +0 -18
- package/tedi/components/content/list/list.component.d.ts.map +0 -1
- package/tedi/components/content/table/index.d.ts +0 -9
- package/tedi/components/content/table/index.d.ts.map +0 -1
- package/tedi/components/content/table/row-span.utils.d.ts +0 -10
- package/tedi/components/content/table/row-span.utils.d.ts.map +0 -1
- package/tedi/components/content/table/table-columns-menu/index.d.ts +0 -2
- package/tedi/components/content/table/table-columns-menu/index.d.ts.map +0 -1
- package/tedi/components/content/table/table-columns-menu/table-columns-menu.component.d.ts +0 -19
- package/tedi/components/content/table/table-columns-menu/table-columns-menu.component.d.ts.map +0 -1
- package/tedi/components/content/table/table-header-button/index.d.ts +0 -2
- package/tedi/components/content/table/table-header-button/index.d.ts.map +0 -1
- package/tedi/components/content/table/table-header-button/table-header-button.component.d.ts +0 -36
- package/tedi/components/content/table/table-header-button/table-header-button.component.d.ts.map +0 -1
- package/tedi/components/content/table/table-toolbar/index.d.ts +0 -2
- package/tedi/components/content/table/table-toolbar/index.d.ts.map +0 -1
- package/tedi/components/content/table/table-toolbar/table-toolbar.component.d.ts +0 -6
- package/tedi/components/content/table/table-toolbar/table-toolbar.component.d.ts.map +0 -1
- package/tedi/components/content/table/table.component.d.ts +0 -640
- package/tedi/components/content/table/table.component.d.ts.map +0 -1
- package/tedi/components/content/table/table.context.d.ts +0 -5
- package/tedi/components/content/table/table.context.d.ts.map +0 -1
- package/tedi/components/content/table/table.persistence.d.ts +0 -26
- package/tedi/components/content/table/table.persistence.d.ts.map +0 -1
- package/tedi/components/content/table/table.types.d.ts +0 -201
- package/tedi/components/content/table/table.types.d.ts.map +0 -1
- package/tedi/components/content/text-group/index.d.ts +0 -4
- package/tedi/components/content/text-group/index.d.ts.map +0 -1
- package/tedi/components/content/text-group/text-group-label.component.d.ts +0 -6
- package/tedi/components/content/text-group/text-group-label.component.d.ts.map +0 -1
- package/tedi/components/content/text-group/text-group-value.component.d.ts +0 -6
- package/tedi/components/content/text-group/text-group-value.component.d.ts.map +0 -1
- package/tedi/components/content/text-group/text-group.component.d.ts +0 -34
- package/tedi/components/content/text-group/text-group.component.d.ts.map +0 -1
- package/tedi/components/filter/filter-content.directive.d.ts +0 -6
- package/tedi/components/filter/filter-content.directive.d.ts.map +0 -1
- package/tedi/components/filter/filter-group.component.d.ts +0 -35
- package/tedi/components/filter/filter-group.component.d.ts.map +0 -1
- package/tedi/components/filter/filter-prepend.directive.d.ts +0 -12
- package/tedi/components/filter/filter-prepend.directive.d.ts.map +0 -1
- package/tedi/components/filter/filter.component.d.ts +0 -171
- package/tedi/components/filter/filter.component.d.ts.map +0 -1
- package/tedi/components/filter/index.d.ts +0 -5
- package/tedi/components/filter/index.d.ts.map +0 -1
- package/tedi/components/form/checkbox/checkbox.component.d.ts +0 -38
- package/tedi/components/form/checkbox/checkbox.component.d.ts.map +0 -1
- package/tedi/components/form/checkbox-card/checkbox-card.component.d.ts +0 -18
- package/tedi/components/form/checkbox-card/checkbox-card.component.d.ts.map +0 -1
- package/tedi/components/form/checkbox-card-group/checkbox-card-group.component.d.ts +0 -6
- package/tedi/components/form/checkbox-card-group/checkbox-card-group.component.d.ts.map +0 -1
- package/tedi/components/form/checkbox-group/checkbox-group.component.d.ts +0 -64
- package/tedi/components/form/checkbox-group/checkbox-group.component.d.ts.map +0 -1
- package/tedi/components/form/date-picker/date-picker-calendar-grid/date-picker-calendar-grid.component.d.ts +0 -38
- package/tedi/components/form/date-picker/date-picker-calendar-grid/date-picker-calendar-grid.component.d.ts.map +0 -1
- package/tedi/components/form/date-picker/date-picker-header/date-picker-header.component.d.ts +0 -56
- package/tedi/components/form/date-picker/date-picker-header/date-picker-header.component.d.ts.map +0 -1
- package/tedi/components/form/date-picker/date-picker-month-grid/date-picker-month-grid.component.d.ts +0 -13
- package/tedi/components/form/date-picker/date-picker-month-grid/date-picker-month-grid.component.d.ts.map +0 -1
- package/tedi/components/form/date-picker/date-picker-year-grid/date-picker-year-grid.component.d.ts +0 -13
- package/tedi/components/form/date-picker/date-picker-year-grid/date-picker-year-grid.component.d.ts.map +0 -1
- package/tedi/components/form/date-picker/date-picker.component.d.ts +0 -137
- package/tedi/components/form/date-picker/date-picker.component.d.ts.map +0 -1
- package/tedi/components/form/feedback-text/feedback-text.component.d.ts +0 -25
- package/tedi/components/form/feedback-text/feedback-text.component.d.ts.map +0 -1
- package/tedi/components/form/form-field/form-field-control.d.ts +0 -30
- package/tedi/components/form/form-field/form-field-control.d.ts.map +0 -1
- package/tedi/components/form/form-field/form-field.component.d.ts +0 -63
- package/tedi/components/form/form-field/form-field.component.d.ts.map +0 -1
- package/tedi/components/form/index.d.ts +0 -20
- package/tedi/components/form/index.d.ts.map +0 -1
- package/tedi/components/form/label/label.component.d.ts +0 -24
- package/tedi/components/form/label/label.component.d.ts.map +0 -1
- package/tedi/components/form/number-field/number-field.component.d.ts +0 -90
- package/tedi/components/form/number-field/number-field.component.d.ts.map +0 -1
- package/tedi/components/form/radio/radio.component.d.ts +0 -38
- package/tedi/components/form/radio/radio.component.d.ts.map +0 -1
- package/tedi/components/form/radio-card/radio-card.component.d.ts +0 -31
- package/tedi/components/form/radio-card/radio-card.component.d.ts.map +0 -1
- package/tedi/components/form/radio-card-group/radio-card-group.component.d.ts +0 -13
- package/tedi/components/form/radio-card-group/radio-card-group.component.d.ts.map +0 -1
- package/tedi/components/form/radio-group/radio-group.component.d.ts +0 -70
- package/tedi/components/form/radio-group/radio-group.component.d.ts.map +0 -1
- package/tedi/components/form/select/index.d.ts +0 -3
- package/tedi/components/form/select/index.d.ts.map +0 -1
- package/tedi/components/form/select/select-templates.directive.d.ts +0 -69
- package/tedi/components/form/select/select-templates.directive.d.ts.map +0 -1
- package/tedi/components/form/select/select.component.d.ts +0 -286
- package/tedi/components/form/select/select.component.d.ts.map +0 -1
- package/tedi/components/form/text-field/text-field.component.d.ts +0 -38
- package/tedi/components/form/text-field/text-field.component.d.ts.map +0 -1
- package/tedi/components/form/time-field/index.d.ts +0 -2
- package/tedi/components/form/time-field/index.d.ts.map +0 -1
- package/tedi/components/form/time-field/time-field.component.d.ts +0 -104
- package/tedi/components/form/time-field/time-field.component.d.ts.map +0 -1
- package/tedi/components/form/time-field/time-picker-modal.component.d.ts +0 -26
- package/tedi/components/form/time-field/time-picker-modal.component.d.ts.map +0 -1
- package/tedi/components/form/time-picker/index.d.ts +0 -2
- package/tedi/components/form/time-picker/index.d.ts.map +0 -1
- package/tedi/components/form/time-picker/time-picker.component.d.ts +0 -99
- package/tedi/components/form/time-picker/time-picker.component.d.ts.map +0 -1
- package/tedi/components/form/toggle/toggle.component.d.ts +0 -61
- package/tedi/components/form/toggle/toggle.component.d.ts.map +0 -1
- package/tedi/components/helpers/ellipsis/ellipsis.component.d.ts +0 -21
- package/tedi/components/helpers/ellipsis/ellipsis.component.d.ts.map +0 -1
- package/tedi/components/helpers/ellipsis/index.d.ts +0 -3
- package/tedi/components/helpers/ellipsis/index.d.ts.map +0 -1
- package/tedi/components/helpers/empty-state/empty-state.component.d.ts +0 -54
- package/tedi/components/helpers/empty-state/empty-state.component.d.ts.map +0 -1
- package/tedi/components/helpers/empty-state/index.d.ts +0 -2
- package/tedi/components/helpers/empty-state/index.d.ts.map +0 -1
- package/tedi/components/helpers/grid/col/col.component.d.ts +0 -37
- package/tedi/components/helpers/grid/col/col.component.d.ts.map +0 -1
- package/tedi/components/helpers/grid/index.d.ts +0 -3
- package/tedi/components/helpers/grid/index.d.ts.map +0 -1
- package/tedi/components/helpers/grid/row/row.component.d.ts +0 -60
- package/tedi/components/helpers/grid/row/row.component.d.ts.map +0 -1
- package/tedi/components/helpers/index.d.ts +0 -7
- package/tedi/components/helpers/index.d.ts.map +0 -1
- package/tedi/components/helpers/scroll-fade/index.d.ts +0 -3
- package/tedi/components/helpers/scroll-fade/index.d.ts.map +0 -1
- package/tedi/components/helpers/scroll-fade/scroll-fade.component.d.ts +0 -29
- package/tedi/components/helpers/scroll-fade/scroll-fade.component.d.ts.map +0 -1
- package/tedi/components/helpers/separator/separator.component.d.ts +0 -57
- package/tedi/components/helpers/separator/separator.component.d.ts.map +0 -1
- package/tedi/components/helpers/timeline/index.d.ts +0 -5
- package/tedi/components/helpers/timeline/index.d.ts.map +0 -1
- package/tedi/components/helpers/timeline/timeline-description/timeline-description.component.d.ts +0 -6
- package/tedi/components/helpers/timeline/timeline-description/timeline-description.component.d.ts.map +0 -1
- package/tedi/components/helpers/timeline/timeline-item/timeline-item.component.d.ts +0 -19
- package/tedi/components/helpers/timeline/timeline-item/timeline-item.component.d.ts.map +0 -1
- package/tedi/components/helpers/timeline/timeline-title/timeline-title.component.d.ts +0 -6
- package/tedi/components/helpers/timeline/timeline-title/timeline-title.component.d.ts.map +0 -1
- package/tedi/components/helpers/timeline/timeline.component.d.ts +0 -12
- package/tedi/components/helpers/timeline/timeline.component.d.ts.map +0 -1
- package/tedi/components/index.d.ts +0 -14
- package/tedi/components/index.d.ts.map +0 -1
- package/tedi/components/layout/footer/footer-body/footer-body.component.d.ts +0 -9
- package/tedi/components/layout/footer/footer-body/footer-body.component.d.ts.map +0 -1
- package/tedi/components/layout/footer/footer-bottom/footer-bottom.component.d.ts +0 -19
- package/tedi/components/layout/footer/footer-bottom/footer-bottom.component.d.ts.map +0 -1
- package/tedi/components/layout/footer/footer-section/footer-section.component.d.ts +0 -26
- package/tedi/components/layout/footer/footer-section/footer-section.component.d.ts.map +0 -1
- package/tedi/components/layout/footer/footer-side/footer-side.component.d.ts +0 -21
- package/tedi/components/layout/footer/footer-side/footer-side.component.d.ts.map +0 -1
- package/tedi/components/layout/footer/footer.component.d.ts +0 -9
- package/tedi/components/layout/footer/footer.component.d.ts.map +0 -1
- package/tedi/components/layout/footer/index.d.ts +0 -6
- package/tedi/components/layout/footer/index.d.ts.map +0 -1
- package/tedi/components/layout/header/header-actions/header-actions.component.d.ts +0 -6
- package/tedi/components/layout/header/header-actions/header-actions.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-content/header-content.component.d.ts +0 -6
- package/tedi/components/layout/header/header-content/header-content.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-language/header-language.component.d.ts +0 -25
- package/tedi/components/layout/header/header-language/header-language.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-login/header-login.component.d.ts +0 -14
- package/tedi/components/layout/header/header-login/header-login.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-logout/header-logout.component.d.ts +0 -10
- package/tedi/components/layout/header/header-logout/header-logout.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-profile/header-profile.component.d.ts +0 -26
- package/tedi/components/layout/header/header-profile/header-profile.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header-role/header-role.component.d.ts +0 -40
- package/tedi/components/layout/header/header-role/header-role.component.d.ts.map +0 -1
- package/tedi/components/layout/header/header.component.d.ts +0 -6
- package/tedi/components/layout/header/header.component.d.ts.map +0 -1
- package/tedi/components/layout/header/index.d.ts +0 -9
- package/tedi/components/layout/header/index.d.ts.map +0 -1
- package/tedi/components/layout/index.d.ts +0 -4
- package/tedi/components/layout/index.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/index.d.ts +0 -9
- package/tedi/components/layout/sidenav/index.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown/sidenav-dropdown.component.d.ts +0 -15
- package/tedi/components/layout/sidenav/sidenav-dropdown/sidenav-dropdown.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-group/sidenav-dropdown-group.component.d.ts +0 -13
- package/tedi/components/layout/sidenav/sidenav-dropdown-group/sidenav-dropdown-group.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts +0 -24
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-group-title/sidenav-group-title.component.d.ts +0 -6
- package/tedi/components/layout/sidenav/sidenav-group-title/sidenav-group-title.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts +0 -38
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-overlay/sidenav-overlay.component.d.ts +0 -10
- package/tedi/components/layout/sidenav/sidenav-overlay/sidenav-overlay.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav-toggle/sidenav-toggle.component.d.ts +0 -13
- package/tedi/components/layout/sidenav/sidenav-toggle/sidenav-toggle.component.d.ts.map +0 -1
- package/tedi/components/layout/sidenav/sidenav.component.d.ts +0 -32
- package/tedi/components/layout/sidenav/sidenav.component.d.ts.map +0 -1
- package/tedi/components/loader/index.d.ts +0 -2
- package/tedi/components/loader/index.d.ts.map +0 -1
- package/tedi/components/loader/spinner/spinner.component.d.ts +0 -27
- package/tedi/components/loader/spinner/spinner.component.d.ts.map +0 -1
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.d.ts +0 -25
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.d.ts.map +0 -1
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.d.ts +0 -2
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.d.ts.map +0 -1
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.d.ts +0 -18
- package/tedi/components/navigation/horizontal-stepper/horizontal-stepper.component.d.ts.map +0 -1
- package/tedi/components/navigation/horizontal-stepper/index.d.ts +0 -3
- package/tedi/components/navigation/horizontal-stepper/index.d.ts.map +0 -1
- package/tedi/components/navigation/index.d.ts +0 -4
- package/tedi/components/navigation/index.d.ts.map +0 -1
- package/tedi/components/navigation/link/link.component.d.ts +0 -47
- package/tedi/components/navigation/link/link.component.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/index.d.ts +0 -5
- package/tedi/components/navigation/pagination/index.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.d.ts +0 -31
- package/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/pagination-results.directive.d.ts +0 -17
- package/tedi/components/navigation/pagination/pagination-results.directive.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/pagination.component.d.ts +0 -192
- package/tedi/components/navigation/pagination/pagination.component.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/pagination.types.d.ts +0 -58
- package/tedi/components/navigation/pagination/pagination.types.d.ts.map +0 -1
- package/tedi/components/navigation/pagination/pagination.utils.d.ts +0 -24
- package/tedi/components/navigation/pagination/pagination.utils.d.ts.map +0 -1
- package/tedi/components/notifications/alert/alert.component.d.ts +0 -73
- package/tedi/components/notifications/alert/alert.component.d.ts.map +0 -1
- package/tedi/components/notifications/index.d.ts +0 -3
- package/tedi/components/notifications/index.d.ts.map +0 -1
- package/tedi/components/notifications/toast/toast-container.component.d.ts +0 -35
- package/tedi/components/notifications/toast/toast-container.component.d.ts.map +0 -1
- package/tedi/components/notifications/toast/toast.component.d.ts +0 -111
- package/tedi/components/notifications/toast/toast.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-content/dropdown-content.component.d.ts +0 -16
- package/tedi/components/overlay/dropdown/dropdown-content/dropdown-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-item/dropdown-item.component.d.ts +0 -36
- package/tedi/components/overlay/dropdown/dropdown-item/dropdown-item.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component.d.ts +0 -6
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value-meta.component.d.ts +0 -6
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value-meta.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.d.ts +0 -36
- package/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-item-value/index.d.ts +0 -4
- package/tedi/components/overlay/dropdown/dropdown-item-value/index.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts +0 -34
- package/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown.component.d.ts +0 -67
- package/tedi/components/overlay/dropdown/dropdown.component.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/dropdown.tokens.d.ts +0 -34
- package/tedi/components/overlay/dropdown/dropdown.tokens.d.ts.map +0 -1
- package/tedi/components/overlay/dropdown/index.d.ts +0 -7
- package/tedi/components/overlay/dropdown/index.d.ts.map +0 -1
- package/tedi/components/overlay/index.d.ts +0 -5
- package/tedi/components/overlay/index.d.ts.map +0 -1
- package/tedi/components/overlay/modal/index.d.ts +0 -8
- package/tedi/components/overlay/modal/index.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal-content/modal-content.component.d.ts +0 -7
- package/tedi/components/overlay/modal/modal-content/modal-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal-footer/modal-footer.component.d.ts +0 -6
- package/tedi/components/overlay/modal/modal-footer/modal-footer.component.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal-header/modal-header.component.d.ts +0 -27
- package/tedi/components/overlay/modal/modal-header/modal-header.component.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal-ref.d.ts +0 -21
- package/tedi/components/overlay/modal/modal-ref.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal.component.d.ts +0 -50
- package/tedi/components/overlay/modal/modal.component.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal.service.d.ts +0 -35
- package/tedi/components/overlay/modal/modal.service.d.ts.map +0 -1
- package/tedi/components/overlay/modal/modal.types.d.ts +0 -44
- package/tedi/components/overlay/modal/modal.types.d.ts.map +0 -1
- package/tedi/components/overlay/popover/index.d.ts +0 -4
- package/tedi/components/overlay/popover/index.d.ts.map +0 -1
- package/tedi/components/overlay/popover/popover-content/popover-content.component.d.ts +0 -25
- package/tedi/components/overlay/popover/popover-content/popover-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/popover/popover-trigger/popover-trigger.directive.d.ts +0 -16
- package/tedi/components/overlay/popover/popover-trigger/popover-trigger.directive.d.ts.map +0 -1
- package/tedi/components/overlay/popover/popover.component.d.ts +0 -80
- package/tedi/components/overlay/popover/popover.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/index.d.ts +0 -4
- package/tedi/components/overlay/tooltip/index.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts +0 -16
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts +0 -23
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts +0 -51
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts.map +0 -1
- package/tedi/components/tags/index.d.ts +0 -4
- package/tedi/components/tags/index.d.ts.map +0 -1
- package/tedi/components/tags/status-badge/status-badge.component.d.ts +0 -55
- package/tedi/components/tags/status-badge/status-badge.component.d.ts.map +0 -1
- package/tedi/components/tags/status-indicator/index.d.ts +0 -2
- package/tedi/components/tags/status-indicator/index.d.ts.map +0 -1
- package/tedi/components/tags/status-indicator/status-indicator.component.d.ts +0 -37
- package/tedi/components/tags/status-indicator/status-indicator.component.d.ts.map +0 -1
- package/tedi/components/tags/tag/tag.component.d.ts +0 -47
- package/tedi/components/tags/tag/tag.component.d.ts.map +0 -1
- package/tedi/directives/hide-at/hide-at.directive.d.ts +0 -11
- package/tedi/directives/hide-at/hide-at.directive.d.ts.map +0 -1
- package/tedi/directives/index.d.ts +0 -4
- package/tedi/directives/index.d.ts.map +0 -1
- package/tedi/directives/show-at/show-at.directive.d.ts +0 -11
- package/tedi/directives/show-at/show-at.directive.d.ts.map +0 -1
- package/tedi/directives/vertical-spacing/index.d.ts +0 -3
- package/tedi/directives/vertical-spacing/index.d.ts.map +0 -1
- package/tedi/directives/vertical-spacing/vertical-spacing-item.directive.d.ts +0 -13
- package/tedi/directives/vertical-spacing/vertical-spacing-item.directive.d.ts.map +0 -1
- package/tedi/directives/vertical-spacing/vertical-spacing.directive.d.ts +0 -13
- package/tedi/directives/vertical-spacing/vertical-spacing.directive.d.ts.map +0 -1
- package/tedi/helpers/generate-uuid.d.ts +0 -8
- package/tedi/helpers/generate-uuid.d.ts.map +0 -1
- package/tedi/helpers/index.d.ts +0 -2
- package/tedi/helpers/index.d.ts.map +0 -1
- package/tedi/providers/index.d.ts +0 -2
- package/tedi/providers/index.d.ts.map +0 -1
- package/tedi/providers/tedi.provider.d.ts +0 -9
- package/tedi/providers/tedi.provider.d.ts.map +0 -1
- package/tedi/services/breakpoint/breakpoint.service.d.ts +0 -41
- package/tedi/services/breakpoint/breakpoint.service.d.ts.map +0 -1
- package/tedi/services/index.d.ts +0 -6
- package/tedi/services/index.d.ts.map +0 -1
- package/tedi/services/sidenav/sidenav.service.d.ts +0 -20
- package/tedi/services/sidenav/sidenav.service.d.ts.map +0 -1
- package/tedi/services/theme/theme.service.d.ts +0 -15
- package/tedi/services/theme/theme.service.d.ts.map +0 -1
- package/tedi/services/toast/toast-announcer.service.d.ts +0 -34
- package/tedi/services/toast/toast-announcer.service.d.ts.map +0 -1
- package/tedi/services/toast/toast.service.d.ts +0 -83
- package/tedi/services/toast/toast.service.d.ts.map +0 -1
- package/tedi/services/translation/translation.pipe.d.ts +0 -10
- package/tedi/services/translation/translation.pipe.d.ts.map +0 -1
- package/tedi/services/translation/translation.service.d.ts +0 -20
- package/tedi/services/translation/translation.service.d.ts.map +0 -1
- package/tedi/services/translation/translations.d.ts +0 -1161
- package/tedi/services/translation/translations.d.ts.map +0 -1
- package/tedi/tedi-design-system-angular-tedi.d.ts.map +0 -1
- package/tedi/tokens/index.d.ts +0 -3
- package/tedi/tokens/index.d.ts.map +0 -1
- package/tedi/tokens/theme.token.d.ts +0 -3
- package/tedi/tokens/theme.token.d.ts.map +0 -1
- package/tedi/tokens/translation.token.d.ts +0 -4
- package/tedi/tokens/translation.token.d.ts.map +0 -1
- package/tedi/types/index.d.ts +0 -2
- package/tedi/types/index.d.ts.map +0 -1
- package/tedi/types/inputs.type.d.ts +0 -5
- package/tedi/types/inputs.type.d.ts.map +0 -1
- package/tedi/utils/cookies.util.d.ts +0 -2
- package/tedi/utils/cookies.util.d.ts.map +0 -1
- package/tedi/utils/date.util.d.ts +0 -26
- package/tedi/utils/date.util.d.ts.map +0 -1
- package/tedi/utils/elements.util.d.ts +0 -2
- package/tedi/utils/elements.util.d.ts.map +0 -1
- package/tedi/utils/time.util.d.ts +0 -22
- package/tedi/utils/time.util.d.ts.map +0 -1
- package/tedi-design-system-angular.d.ts.map +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, model, contentChildren, effect, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef,
|
|
2
|
+
import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, model, contentChildren, effect, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, EventEmitter } from '@angular/core';
|
|
3
3
|
import * as i1 from '@tedi-design-system/angular/tedi';
|
|
4
|
-
import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent,
|
|
4
|
+
import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, AttachmentComponent, AttachmentActionsComponent, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
|
|
5
5
|
import { _IdGenerator, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
7
|
import { NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
|
|
8
8
|
import * as i1$2 from '@angular/forms';
|
|
9
|
-
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
|
+
import { NG_VALUE_ACCESSOR, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
|
|
10
10
|
import * as i2 from '@angular/cdk/overlay';
|
|
11
11
|
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
|
|
12
12
|
import * as i3 from '@angular/cdk/listbox';
|
|
@@ -25,17 +25,17 @@ class FloatingButtonComponent {
|
|
|
25
25
|
* Specifies the color theme of the button. The color should meet accessibility standards for color contrast.
|
|
26
26
|
* @default primary
|
|
27
27
|
*/
|
|
28
|
-
variant = input("primary");
|
|
28
|
+
variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
29
29
|
/**
|
|
30
30
|
* Defines the size of the button.
|
|
31
31
|
* @default default
|
|
32
32
|
*/
|
|
33
|
-
size = input("default");
|
|
33
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
34
34
|
/**
|
|
35
35
|
* Button axis
|
|
36
36
|
* @default horizontal
|
|
37
37
|
*/
|
|
38
|
-
axis = input("horizontal");
|
|
38
|
+
axis = input("horizontal", ...(ngDevMode ? [{ debugName: "axis" }] : []));
|
|
39
39
|
buttonDirective = inject(BaseButtonDirective);
|
|
40
40
|
ngOnInit() {
|
|
41
41
|
this.buttonDirective.classNamePrefix.set("tedi-floating-button");
|
|
@@ -48,11 +48,11 @@ class FloatingButtonComponent {
|
|
|
48
48
|
`tedi-floating-button--${this.axis() ?? "horizontal"}`,
|
|
49
49
|
];
|
|
50
50
|
return classes.join(" ");
|
|
51
|
-
});
|
|
52
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
53
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "floatClasses()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{font-size:inherit;color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{font-size:inherit;color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var( --button-floating-primary-background-hover, var(--button-floating-primary-background-default) );--_btn-hover-border: var( --button-floating-primary-border-hover, var(--button-floating-primary-border-default) );--_btn-hover-text: var( --button-floating-primary-text-hover, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var( --button-floating-primary-background-focus, var(--button-floating-primary-background-default) );--_btn-focus-border: var( --button-floating-primary-border-focus, var(--button-floating-primary-border-default) );--_btn-focus-text: var( --button-floating-primary-text-focus, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var( --button-floating-primary-background-active, var(--button-floating-primary-background-default) );--_btn-active-border: var( --button-floating-primary-border-active, var(--button-floating-primary-border-default) );--_btn-active-text: var( --button-floating-primary-text-active, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var( --button-floating-secondary-background-hover, var(--button-floating-secondary-background-default) );--_btn-hover-border: var( --button-floating-secondary-border-hover, var(--button-floating-secondary-border-default) );--_btn-hover-text: var( --button-floating-secondary-text-hover, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var( --button-floating-secondary-background-focus, var(--button-floating-secondary-background-default) );--_btn-focus-border: var( --button-floating-secondary-border-focus, var(--button-floating-secondary-border-default) );--_btn-focus-text: var( --button-floating-secondary-text-focus, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var( --button-floating-secondary-background-active, var(--button-floating-secondary-background-default) );--_btn-active-border: var( --button-floating-secondary-border-active, var(--button-floating-secondary-border-default) );--_btn-active-text: var( --button-floating-secondary-text-active, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
51
|
+
}, ...(ngDevMode ? [{ debugName: "floatClasses" }] : []));
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "floatClasses()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var( --button-floating-primary-background-hover, var(--button-floating-primary-background-default) );--_btn-hover-border: var( --button-floating-primary-border-hover, var(--button-floating-primary-border-default) );--_btn-hover-text: var( --button-floating-primary-text-hover, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var( --button-floating-primary-background-focus, var(--button-floating-primary-background-default) );--_btn-focus-border: var( --button-floating-primary-border-focus, var(--button-floating-primary-border-default) );--_btn-focus-text: var( --button-floating-primary-text-focus, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var( --button-floating-primary-background-active, var(--button-floating-primary-background-default) );--_btn-active-border: var( --button-floating-primary-border-active, var(--button-floating-primary-border-default) );--_btn-active-text: var( --button-floating-primary-text-active, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var( --button-floating-secondary-background-hover, var(--button-floating-secondary-background-default) );--_btn-hover-border: var( --button-floating-secondary-border-hover, var(--button-floating-secondary-border-default) );--_btn-hover-text: var( --button-floating-secondary-text-hover, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var( --button-floating-secondary-background-focus, var(--button-floating-secondary-background-default) );--_btn-focus-border: var( --button-floating-secondary-border-focus, var(--button-floating-secondary-border-default) );--_btn-focus-text: var( --button-floating-secondary-text-focus, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var( --button-floating-secondary-background-active, var(--button-floating-secondary-background-default) );--_btn-active-border: var( --button-floating-secondary-border-active, var(--button-floating-secondary-border-default) );--_btn-active-text: var( --button-floating-secondary-text-active, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
54
54
|
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
57
|
args: [{ selector: "[tedi-floating-button]", template: `<ng-content />`, encapsulation: ViewEncapsulation.None, hostDirectives: [
|
|
58
58
|
{
|
|
@@ -60,15 +60,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
60
60
|
},
|
|
61
61
|
], host: {
|
|
62
62
|
"[class]": "floatClasses()",
|
|
63
|
-
}, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{font-size:inherit;color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{font-size:inherit;color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var( --button-floating-primary-background-hover, var(--button-floating-primary-background-default) );--_btn-hover-border: var( --button-floating-primary-border-hover, var(--button-floating-primary-border-default) );--_btn-hover-text: var( --button-floating-primary-text-hover, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var( --button-floating-primary-background-focus, var(--button-floating-primary-background-default) );--_btn-focus-border: var( --button-floating-primary-border-focus, var(--button-floating-primary-border-default) );--_btn-focus-text: var( --button-floating-primary-text-focus, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var( --button-floating-primary-background-active, var(--button-floating-primary-background-default) );--_btn-active-border: var( --button-floating-primary-border-active, var(--button-floating-primary-border-default) );--_btn-active-text: var( --button-floating-primary-text-active, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var( --button-floating-secondary-background-hover, var(--button-floating-secondary-background-default) );--_btn-hover-border: var( --button-floating-secondary-border-hover, var(--button-floating-secondary-border-default) );--_btn-hover-text: var( --button-floating-secondary-text-hover, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var( --button-floating-secondary-background-focus, var(--button-floating-secondary-background-default) );--_btn-focus-border: var( --button-floating-secondary-border-focus, var(--button-floating-secondary-border-default) );--_btn-focus-text: var( --button-floating-secondary-text-focus, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var( --button-floating-secondary-background-active, var(--button-floating-secondary-background-default) );--_btn-active-border: var( --button-floating-secondary-border-active, var(--button-floating-secondary-border-default) );--_btn-active-text: var( --button-floating-secondary-text-active, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"] }]
|
|
64
|
-
}] });
|
|
63
|
+
}, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var( --button-floating-primary-background-hover, var(--button-floating-primary-background-default) );--_btn-hover-border: var( --button-floating-primary-border-hover, var(--button-floating-primary-border-default) );--_btn-hover-text: var( --button-floating-primary-text-hover, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var( --button-floating-primary-background-focus, var(--button-floating-primary-background-default) );--_btn-focus-border: var( --button-floating-primary-border-focus, var(--button-floating-primary-border-default) );--_btn-focus-text: var( --button-floating-primary-text-focus, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var( --button-floating-primary-background-active, var(--button-floating-primary-background-default) );--_btn-active-border: var( --button-floating-primary-border-active, var(--button-floating-primary-border-default) );--_btn-active-text: var( --button-floating-primary-text-active, var(--button-floating-primary-text-default) )}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var( --button-floating-secondary-background-hover, var(--button-floating-secondary-background-default) );--_btn-hover-border: var( --button-floating-secondary-border-hover, var(--button-floating-secondary-border-default) );--_btn-hover-text: var( --button-floating-secondary-text-hover, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var( --button-floating-secondary-background-focus, var(--button-floating-secondary-background-default) );--_btn-focus-border: var( --button-floating-secondary-border-focus, var(--button-floating-secondary-border-default) );--_btn-focus-text: var( --button-floating-secondary-text-focus, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var( --button-floating-secondary-background-active, var(--button-floating-secondary-background-default) );--_btn-active-border: var( --button-floating-secondary-border-active, var(--button-floating-secondary-border-default) );--_btn-active-text: var( --button-floating-secondary-text-active, var(--button-floating-secondary-text-default) )}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"] }]
|
|
64
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }] } });
|
|
65
65
|
|
|
66
|
+
/**
|
|
67
|
+
* @deprecated Use background and border inputs on TEDI-ready Card components instead. This directive will be removed from future versions.
|
|
68
|
+
*/
|
|
66
69
|
class CardColorsDirective {
|
|
67
70
|
/**
|
|
68
71
|
* Modifies background of the block it's attached to.
|
|
69
72
|
*/
|
|
70
|
-
background = input();
|
|
71
|
-
border = input();
|
|
73
|
+
background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
|
|
74
|
+
border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : []));
|
|
72
75
|
modifierClasses = computed(() => {
|
|
73
76
|
const modifiers = [];
|
|
74
77
|
if (this.background()) {
|
|
@@ -78,11 +81,11 @@ class CardColorsDirective {
|
|
|
78
81
|
modifiers.push(`tedi-card--border--${this.border()}`);
|
|
79
82
|
}
|
|
80
83
|
return modifiers.join(" ");
|
|
81
|
-
});
|
|
82
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
83
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
84
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
85
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardColorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
86
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: CardColorsDirective, isStandalone: true, inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "modifierClasses()" } }, ngImport: i0 });
|
|
84
87
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardColorsDirective, decorators: [{
|
|
86
89
|
type: Directive,
|
|
87
90
|
args: [{
|
|
88
91
|
standalone: true,
|
|
@@ -90,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
90
93
|
"[class]": "modifierClasses()",
|
|
91
94
|
},
|
|
92
95
|
}]
|
|
93
|
-
}] });
|
|
96
|
+
}], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }] } });
|
|
94
97
|
|
|
95
98
|
const getPaddingClasses = (padding) => {
|
|
96
99
|
if (typeof padding === "string") {
|
|
@@ -104,21 +107,24 @@ const getPaddingClasses = (padding) => {
|
|
|
104
107
|
.join(" ");
|
|
105
108
|
}
|
|
106
109
|
};
|
|
110
|
+
/**
|
|
111
|
+
* @deprecated Use the padding input on TEDI-ready Card components instead. This directive will be removed from future versions.
|
|
112
|
+
*/
|
|
107
113
|
class CardPaddingDirective {
|
|
108
114
|
/**
|
|
109
115
|
* Modifies padding of the block it's attached to. Can be override whole block or horizontal, vertical or each side separately.
|
|
110
116
|
*/
|
|
111
|
-
padding = input();
|
|
117
|
+
padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : []));
|
|
112
118
|
modifierClasses = computed(() => {
|
|
113
119
|
if (this.padding()) {
|
|
114
120
|
return getPaddingClasses(this.padding());
|
|
115
121
|
}
|
|
116
122
|
return "";
|
|
117
|
-
});
|
|
118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
119
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
123
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
124
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardPaddingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
125
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: CardPaddingDirective, isStandalone: true, inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "modifierClasses()" } }, ngImport: i0 });
|
|
120
126
|
}
|
|
121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardPaddingDirective, decorators: [{
|
|
122
128
|
type: Directive,
|
|
123
129
|
args: [{
|
|
124
130
|
standalone: true,
|
|
@@ -126,39 +132,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
126
132
|
"[class]": "modifierClasses()",
|
|
127
133
|
},
|
|
128
134
|
}]
|
|
129
|
-
}] });
|
|
135
|
+
}], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
|
|
130
136
|
|
|
137
|
+
/**
|
|
138
|
+
* @deprecated Use Card from TEDI-ready instead. This component will be removed from future versions.
|
|
139
|
+
*/
|
|
131
140
|
class CardComponent {
|
|
132
141
|
/**
|
|
133
142
|
* Whether card should not have border.
|
|
134
143
|
* @default false
|
|
135
144
|
*/
|
|
136
|
-
borderless = input();
|
|
145
|
+
borderless = input(...(ngDevMode ? [undefined, { debugName: "borderless" }] : []));
|
|
137
146
|
/**
|
|
138
147
|
* Sets padding for header and content block.
|
|
139
148
|
* @default md
|
|
140
149
|
*/
|
|
141
|
-
spacing = input("md");
|
|
150
|
+
spacing = input("md", ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
142
151
|
/**
|
|
143
152
|
* Creates colored accent left border.
|
|
144
153
|
*/
|
|
145
|
-
accentBorder = input();
|
|
154
|
+
accentBorder = input(...(ngDevMode ? [undefined, { debugName: "accentBorder" }] : []));
|
|
146
155
|
/**
|
|
147
156
|
* Whether card should have selected border.
|
|
148
157
|
* @default false
|
|
149
158
|
*/
|
|
150
|
-
selected = input();
|
|
159
|
+
selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
|
|
151
160
|
modifierClasses = computed(() => {
|
|
152
161
|
const modifiers = [`tedi-card--spacing-${this.spacing()}`];
|
|
153
162
|
if (this.accentBorder()) {
|
|
154
163
|
modifiers.push(`tedi-card--accent-border`, `tedi-card--accent-border--${this.accentBorder()}`);
|
|
155
164
|
}
|
|
156
165
|
return modifiers.join(" ");
|
|
157
|
-
});
|
|
158
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CardComponent, isStandalone: true, selector: "tedi-card", inputs: { borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, accentBorder: { classPropertyName: "accentBorder", publicName: "accentBorder", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card": "true", "class.tedi-card--borderless": "borderless()", "class.tedi-card--selected": "selected()", "class": "modifierClasses()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card{--_card-border: var(--card-border-primary);--_card-selected-border: var(--card-border-selected);--_card-bg: var(--card-background-primary);--_card-timeline-color: var(--general-border-accent);--_card-radius: var(--card-radius-rounded);border-radius:var(--_card-radius);display:flex;flex-direction:column;position:relative}.tedi-card--background--accent{--_card-bg: var(--card-background-accent)}.tedi-card--border--accent{--_card-border: var(--card-background-accent)}.tedi-card--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-card--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-card--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-card--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-card--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-card--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-card--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-card--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-card--background--primary{--_card-bg: var(--card-background-primary)}.tedi-card--border--primary{--_card-border: var(--card-background-primary)}.tedi-card--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-card--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-card--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-card--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-card--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-card--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-card--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-card--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-card--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-card--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-card--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-card--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-card--border--success-primary{--_card-border: var(--card-background-success)}.tedi-card--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-card--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-card--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-card--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-card--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-card--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-card--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-card--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-card--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-card--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-card--spacing-xs{--_card-padding-top: var(--card-padding-xs);--_card-padding-bottom: var(--card-padding-xs);--_card-padding-left: var(--card-padding-xs);--_card-padding-right: var(--card-padding-xs)}.tedi-card--spacing-sm{--_card-padding-top: var(--card-padding-sm);--_card-padding-bottom: var(--card-padding-sm);--_card-padding-left: var(--card-padding-sm);--_card-padding-right: var(--card-padding-sm)}.tedi-card--spacing-md{--_card-padding-top: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default)}.tedi-card--spacing-lg{--_card-padding-top: var(--card-padding-lg);--_card-padding-bottom: var(--card-padding-lg);--_card-padding-left: var(--card-padding-lg);--_card-padding-right: var(--card-padding-lg)}.tedi-card--spacing-none{--_card-padding-top: 0;--_card-padding-bottom: 0;--_card-padding-left: 0;--_card-padding-right: 0}.tedi-card--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-top: 0}.tedi-card--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-bottom: 0}.tedi-card--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-left: 0}.tedi-card--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-right: 0}.tedi-card--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-top: 0}.tedi-card--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-left: 0}.tedi-card--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-right: 0}.tedi-card--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-top-none{--_card-padding-top: 0}.tedi-card--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-left-none{--_card-padding-left: 0}.tedi-card--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-right-none{--_card-padding-right: 0}.tedi-card--accent-border:before{content:\"\";display:block;position:absolute;left:0;top:0;bottom:0;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius);border-left:4px solid var(--_card-border-accent)}.tedi-card--accent-border--info{--_card-border-accent: var(--general-status-info-background-dark)}.tedi-card--accent-border--success{--_card-border-accent: var(--general-status-success-background-secondary)}.tedi-card--accent-border--warning{--_card-border-accent: var(--general-status-warning-background-dark)}.tedi-card--accent-border--danger{--_card-border-accent: var(--general-status-danger-background-secondary)}.tedi-card>.tedi-card-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:not(:first-child){border-top:transparent}.tedi-card>.tedi-card-content:not(.tedi-card-content--has-separator,:last-child){border-bottom:transparent}.tedi-card>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:last-child{border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row>.tedi-card-content:not(:first-child){border-left:transparent}.tedi-card>.tedi-card-row>.tedi-card-content:not(:last-child,.tedi-card-content--has-separator){border-right:transparent}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:last-child{border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:first-child{border-bottom-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:last-child{border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:not(:first-child)>.tedi-card-content{border-top:transparent}.tedi-card>.tedi-card-row:not(:last-child,.tedi-card-row--has-separator)>.tedi-card-content{border-bottom:transparent}.tedi-card--selected{outline:1px solid var(--_card-selected-border);outline-offset:-1px}.tedi-card--borderless{--_card-border: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
166
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardComponent, isStandalone: true, selector: "tedi-card", inputs: { borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, accentBorder: { classPropertyName: "accentBorder", publicName: "accentBorder", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card": "true", "class.tedi-card--borderless": "borderless()", "class.tedi-card--selected": "selected()", "class": "modifierClasses()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card{--_card-border: var(--card-border-primary);--_card-selected-border: var(--card-border-selected);--_card-bg: var(--card-background-primary);--_card-timeline-color: var(--general-border-accent);--_card-radius: var(--card-radius-rounded);border-radius:var(--_card-radius);display:flex;flex-direction:column;position:relative}.tedi-card--background--accent{--_card-bg: var(--card-background-accent)}.tedi-card--border--accent{--_card-border: var(--card-background-accent)}.tedi-card--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-card--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-card--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-card--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-card--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-card--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-card--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-card--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-card--background--primary{--_card-bg: var(--card-background-primary)}.tedi-card--border--primary{--_card-border: var(--card-background-primary)}.tedi-card--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-card--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-card--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-card--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-card--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-card--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-card--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-card--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-card--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-card--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-card--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-card--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-card--border--success-primary{--_card-border: var(--card-background-success)}.tedi-card--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-card--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-card--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-card--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-card--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-card--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-card--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-card--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-card--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-card--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-card--spacing-xs{--_card-padding-top: var(--card-padding-xs);--_card-padding-bottom: var(--card-padding-xs);--_card-padding-left: var(--card-padding-xs);--_card-padding-right: var(--card-padding-xs)}.tedi-card--spacing-sm{--_card-padding-top: var(--card-padding-sm);--_card-padding-bottom: var(--card-padding-sm);--_card-padding-left: var(--card-padding-sm);--_card-padding-right: var(--card-padding-sm)}.tedi-card--spacing-md{--_card-padding-top: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default)}.tedi-card--spacing-lg{--_card-padding-top: var(--card-padding-lg);--_card-padding-bottom: var(--card-padding-lg);--_card-padding-left: var(--card-padding-lg);--_card-padding-right: var(--card-padding-lg)}.tedi-card--spacing-none{--_card-padding-top: 0;--_card-padding-bottom: 0;--_card-padding-left: 0;--_card-padding-right: 0}.tedi-card--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-top: 0}.tedi-card--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-bottom: 0}.tedi-card--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-left: 0}.tedi-card--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-right: 0}.tedi-card--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-top: 0}.tedi-card--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-left: 0}.tedi-card--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-right: 0}.tedi-card--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-top-none{--_card-padding-top: 0}.tedi-card--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-left-none{--_card-padding-left: 0}.tedi-card--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-right-none{--_card-padding-right: 0}.tedi-card--accent-border:before{content:\"\";display:block;position:absolute;left:0;top:0;bottom:0;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius);border-left:4px solid var(--_card-border-accent)}.tedi-card--accent-border--info{--_card-border-accent: var(--general-status-info-background-dark)}.tedi-card--accent-border--success{--_card-border-accent: var(--general-status-success-background-secondary)}.tedi-card--accent-border--warning{--_card-border-accent: var(--general-status-warning-background-dark)}.tedi-card--accent-border--danger{--_card-border-accent: var(--general-status-danger-background-secondary)}.tedi-card>.tedi-card-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:not(:first-child){border-top:transparent}.tedi-card>.tedi-card-content:not(.tedi-card-content--has-separator,:last-child){border-bottom:transparent}.tedi-card>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:last-child{border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row>.tedi-card-content:not(:first-child){border-left:transparent}.tedi-card>.tedi-card-row>.tedi-card-content:not(:last-child,.tedi-card-content--has-separator){border-right:transparent}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:last-child{border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:first-child{border-bottom-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:last-child{border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:not(:first-child)>.tedi-card-content{border-top:transparent}.tedi-card>.tedi-card-row:not(:last-child,.tedi-card-row--has-separator)>.tedi-card-content{border-bottom:transparent}.tedi-card--selected{outline:1px solid var(--_card-selected-border);outline-offset:-1px}.tedi-card--borderless{--_card-border: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
160
169
|
}
|
|
161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, decorators: [{
|
|
162
171
|
type: Component,
|
|
163
172
|
args: [{ selector: "tedi-card", standalone: true, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
164
173
|
"[class.tedi-card]": "true",
|
|
@@ -175,26 +184,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
175
184
|
inputs: ["padding"],
|
|
176
185
|
},
|
|
177
186
|
], template: "<ng-content></ng-content>\n", styles: [".tedi-card{--_card-border: var(--card-border-primary);--_card-selected-border: var(--card-border-selected);--_card-bg: var(--card-background-primary);--_card-timeline-color: var(--general-border-accent);--_card-radius: var(--card-radius-rounded);border-radius:var(--_card-radius);display:flex;flex-direction:column;position:relative}.tedi-card--background--accent{--_card-bg: var(--card-background-accent)}.tedi-card--border--accent{--_card-border: var(--card-background-accent)}.tedi-card--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-card--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-card--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-card--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-card--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-card--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-card--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-card--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-card--background--primary{--_card-bg: var(--card-background-primary)}.tedi-card--border--primary{--_card-border: var(--card-background-primary)}.tedi-card--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-card--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-card--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-card--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-card--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-card--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-card--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-card--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-card--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-card--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-card--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-card--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-card--border--success-primary{--_card-border: var(--card-background-success)}.tedi-card--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-card--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-card--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-card--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-card--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-card--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-card--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-card--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-card--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-card--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-card--spacing-xs{--_card-padding-top: var(--card-padding-xs);--_card-padding-bottom: var(--card-padding-xs);--_card-padding-left: var(--card-padding-xs);--_card-padding-right: var(--card-padding-xs)}.tedi-card--spacing-sm{--_card-padding-top: var(--card-padding-sm);--_card-padding-bottom: var(--card-padding-sm);--_card-padding-left: var(--card-padding-sm);--_card-padding-right: var(--card-padding-sm)}.tedi-card--spacing-md{--_card-padding-top: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default)}.tedi-card--spacing-lg{--_card-padding-top: var(--card-padding-lg);--_card-padding-bottom: var(--card-padding-lg);--_card-padding-left: var(--card-padding-lg);--_card-padding-right: var(--card-padding-lg)}.tedi-card--spacing-none{--_card-padding-top: 0;--_card-padding-bottom: 0;--_card-padding-left: 0;--_card-padding-right: 0}.tedi-card--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-top: 0}.tedi-card--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-bottom: 0}.tedi-card--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-left: 0}.tedi-card--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-right: 0}.tedi-card--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-top: 0}.tedi-card--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-left: 0}.tedi-card--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-right: 0}.tedi-card--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-top-none{--_card-padding-top: 0}.tedi-card--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-left-none{--_card-padding-left: 0}.tedi-card--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-right-none{--_card-padding-right: 0}.tedi-card--accent-border:before{content:\"\";display:block;position:absolute;left:0;top:0;bottom:0;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius);border-left:4px solid var(--_card-border-accent)}.tedi-card--accent-border--info{--_card-border-accent: var(--general-status-info-background-dark)}.tedi-card--accent-border--success{--_card-border-accent: var(--general-status-success-background-secondary)}.tedi-card--accent-border--warning{--_card-border-accent: var(--general-status-warning-background-dark)}.tedi-card--accent-border--danger{--_card-border-accent: var(--general-status-danger-background-secondary)}.tedi-card>.tedi-card-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:not(:first-child){border-top:transparent}.tedi-card>.tedi-card-content:not(.tedi-card-content--has-separator,:last-child){border-bottom:transparent}.tedi-card>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:last-child{border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row>.tedi-card-content:not(:first-child){border-left:transparent}.tedi-card>.tedi-card-row>.tedi-card-content:not(:last-child,.tedi-card-content--has-separator){border-right:transparent}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:last-child{border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:first-child{border-bottom-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:last-child{border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:not(:first-child)>.tedi-card-content{border-top:transparent}.tedi-card>.tedi-card-row:not(:last-child,.tedi-card-row--has-separator)>.tedi-card-content{border-bottom:transparent}.tedi-card--selected{outline:1px solid var(--_card-selected-border);outline-offset:-1px}.tedi-card--borderless{--_card-border: transparent}\n"] }]
|
|
178
|
-
}] });
|
|
187
|
+
}], propDecorators: { borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], accentBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentBorder", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
|
|
179
188
|
|
|
180
189
|
class AccordionItemComponent {
|
|
181
190
|
/**
|
|
182
191
|
* Accordion item id
|
|
183
192
|
*/
|
|
184
|
-
id = input();
|
|
193
|
+
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
185
194
|
/**
|
|
186
195
|
* Whether accordion item is selected
|
|
187
196
|
*/
|
|
188
|
-
selected = input(false);
|
|
189
|
-
opened = model(false);
|
|
197
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
198
|
+
opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
|
|
190
199
|
idGenerator = inject(_IdGenerator);
|
|
191
|
-
itemId = computed(() => this.id() || this.idGenerator.getId("accordion"));
|
|
200
|
+
itemId = computed(() => this.id() || this.idGenerator.getId("accordion"), ...(ngDevMode ? [{ debugName: "itemId" }] : []));
|
|
192
201
|
headerId = computed(() => {
|
|
193
202
|
return `tedi-accordion-header-${this.itemId()}`;
|
|
194
|
-
});
|
|
203
|
+
}, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
|
|
195
204
|
contentId = computed(() => {
|
|
196
205
|
return `tedi-accordion-content-${this.itemId()}`;
|
|
197
|
-
});
|
|
206
|
+
}, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
|
|
198
207
|
open() {
|
|
199
208
|
this.opened.set(true);
|
|
200
209
|
}
|
|
@@ -204,15 +213,15 @@ class AccordionItemComponent {
|
|
|
204
213
|
toggle() {
|
|
205
214
|
this.opened.update((wasOpened) => !wasOpened);
|
|
206
215
|
}
|
|
207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
209
218
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
211
220
|
type: Component,
|
|
212
221
|
args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
213
222
|
"[class.tedi-accordion-item]": "true",
|
|
214
223
|
}, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
|
|
215
|
-
}] });
|
|
224
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
|
|
216
225
|
|
|
217
226
|
/**
|
|
218
227
|
* @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -221,15 +230,15 @@ class AccordionComponent {
|
|
|
221
230
|
/**
|
|
222
231
|
* id-s of items that should be opened by default.
|
|
223
232
|
*/
|
|
224
|
-
defaultOpenItems = input();
|
|
233
|
+
defaultOpenItems = input(...(ngDevMode ? [undefined, { debugName: "defaultOpenItems" }] : []));
|
|
225
234
|
/**
|
|
226
235
|
* Whether only one accordion item can be opened at once.
|
|
227
236
|
* @default false
|
|
228
237
|
*/
|
|
229
|
-
singleOpen = input(false);
|
|
230
|
-
accordionItems = contentChildren(AccordionItemComponent, {
|
|
231
|
-
|
|
232
|
-
|
|
238
|
+
singleOpen = input(false, ...(ngDevMode ? [{ debugName: "singleOpen" }] : []));
|
|
239
|
+
accordionItems = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "accordionItems", descendants: true }] : [{
|
|
240
|
+
descendants: true,
|
|
241
|
+
}]));
|
|
233
242
|
prevOpens = [];
|
|
234
243
|
constructor() {
|
|
235
244
|
effect(() => {
|
|
@@ -266,19 +275,21 @@ class AccordionComponent {
|
|
|
266
275
|
ngOnInit() {
|
|
267
276
|
this.openDefaultOpenItems();
|
|
268
277
|
}
|
|
269
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
270
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
278
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { defaultOpenItems: { classPropertyName: "defaultOpenItems", publicName: "defaultOpenItems", isSignal: true, isRequired: false, transformFunction: null }, singleOpen: { classPropertyName: "singleOpen", publicName: "singleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
271
280
|
}
|
|
272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
273
282
|
type: Component,
|
|
274
283
|
args: [{ selector: "tedi-accordion", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"] }]
|
|
275
|
-
}], ctorParameters: () => [] })
|
|
284
|
+
}], ctorParameters: () => [], propDecorators: { defaultOpenItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItems", required: false }] }], singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { ...{
|
|
285
|
+
descendants: true,
|
|
286
|
+
}, isSignal: true }] }] } });
|
|
276
287
|
|
|
277
288
|
class AccordionIconComponent {
|
|
278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: AccordionIconComponent, isStandalone: true, selector: "tedi-accordion-icon", host: { properties: { "class.tedi-accordion-icon": "true" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background"] }], ngImport: i0, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
280
291
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, decorators: [{
|
|
282
293
|
type: Component,
|
|
283
294
|
args: [{ standalone: true, selector: "tedi-accordion-icon", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
284
295
|
"[class.tedi-accordion-icon]": "true",
|
|
@@ -290,28 +301,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
290
301
|
], template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"] }]
|
|
291
302
|
}] });
|
|
292
303
|
|
|
304
|
+
/**
|
|
305
|
+
* @deprecated Use CardContent from TEDI-ready instead. This component will be removed from future versions.
|
|
306
|
+
*/
|
|
293
307
|
class CardContentComponent {
|
|
294
308
|
/**
|
|
295
309
|
* Whether content block should have separator.
|
|
296
310
|
* Inside card the separator is created under the content, inside card row the separator is created to the right of content.
|
|
297
311
|
* @default false
|
|
298
312
|
*/
|
|
299
|
-
hasSeparator = input(false, { transform: booleanAttribute });
|
|
313
|
+
hasSeparator = input(false, ...(ngDevMode ? [{ debugName: "hasSeparator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
300
314
|
/**
|
|
301
315
|
* Whether content block should take minimal space inside of row.
|
|
302
316
|
* Sets flex-grow to 0.
|
|
303
317
|
* @default false
|
|
304
318
|
*/
|
|
305
|
-
autoWidth = input(false, { transform: booleanAttribute });
|
|
319
|
+
autoWidth = input(false, ...(ngDevMode ? [{ debugName: "autoWidth", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
306
320
|
/**
|
|
307
321
|
* Creates a timeline line next to the content block.
|
|
308
322
|
* @default false
|
|
309
323
|
*/
|
|
310
|
-
timeline = input(false, { transform: booleanAttribute });
|
|
311
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
312
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
324
|
+
timeline = input(false, ...(ngDevMode ? [{ debugName: "timeline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
326
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-content": "true", "class.tedi-card-content--has-separator": "hasSeparator() || timeline()", "class.tedi-card-content--auto-width": "autoWidth()", "class.tedi-card-content--timeline": "timeline()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-content--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-top: 0}.tedi-card-content--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-bottom: 0}.tedi-card-content--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-left: 0}.tedi-card-content--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-right: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-top: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-content--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-top-none{--_card-padding-top: 0}.tedi-card-content--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-content--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-left-none{--_card-padding-left: 0}.tedi-card-content--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-right-none{--_card-padding-right: 0}.tedi-card-content{flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
313
327
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
315
329
|
type: Component,
|
|
316
330
|
args: [{ selector: "tedi-card-content", standalone: true, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
317
331
|
"[class.tedi-card-content]": "true",
|
|
@@ -328,36 +342,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
328
342
|
inputs: ["padding"],
|
|
329
343
|
},
|
|
330
344
|
], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-content--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-top: 0}.tedi-card-content--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-bottom: 0}.tedi-card-content--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-left: 0}.tedi-card-content--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-right: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-top: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-content--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-top-none{--_card-padding-top: 0}.tedi-card-content--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-content--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-left-none{--_card-padding-left: 0}.tedi-card-content--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-right-none{--_card-padding-right: 0}.tedi-card-content{flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
|
|
331
|
-
}] });
|
|
345
|
+
}], propDecorators: { hasSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeparator", required: false }] }], autoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoWidth", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }] } });
|
|
332
346
|
|
|
333
347
|
class AccordionItemContentComponent {
|
|
334
|
-
background = input();
|
|
348
|
+
background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
|
|
335
349
|
accordionItem = inject(AccordionItemComponent);
|
|
336
350
|
headerId = this.accordionItem.headerId;
|
|
337
351
|
contentId = this.accordionItem.contentId;
|
|
338
352
|
opened = this.accordionItem.opened;
|
|
339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
353
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
354
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
341
355
|
}
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
|
|
343
357
|
type: Component,
|
|
344
358
|
args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
345
359
|
"[class.tedi-accordion-item-content]": "true",
|
|
346
360
|
}, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
|
|
347
|
-
}] });
|
|
361
|
+
}], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
|
|
348
362
|
|
|
363
|
+
/**
|
|
364
|
+
* @deprecated Use CardHeader from TEDI-ready instead. This component will be removed from future versions.
|
|
365
|
+
*/
|
|
349
366
|
class CardHeaderComponent {
|
|
350
367
|
/**
|
|
351
368
|
* Variant of the card header.
|
|
352
369
|
*/
|
|
353
|
-
variant = input();
|
|
370
|
+
variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
|
|
354
371
|
modifierClasses = computed(() => {
|
|
355
372
|
return `tedi-card-header--${this.variant()}`;
|
|
356
|
-
});
|
|
357
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
358
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
373
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
374
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardHeaderComponent, isStandalone: true, selector: "tedi-card-header, [tedi-card-header]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-header": "true", "class": "modifierClasses()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-header{border:1px solid var(--_card-border);background:var(--_card-bg);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-header--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-top: 0}.tedi-card-header--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-bottom: 0}.tedi-card-header--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-left: 0}.tedi-card-header--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-right: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-top: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-header--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-top-none{--_card-padding-top: 0}.tedi-card-header--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-header--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-left-none{--_card-padding-left: 0}.tedi-card-header--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-right-none{--_card-padding-right: 0}.tedi-card-header--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-card-header--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-card-header--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-card-header--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-card-header--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
359
376
|
}
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
361
378
|
type: Component,
|
|
362
379
|
args: [{ selector: "tedi-card-header, [tedi-card-header]", standalone: true, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
363
380
|
"[class.tedi-card-header]": "true",
|
|
@@ -372,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
372
389
|
inputs: ["padding"],
|
|
373
390
|
},
|
|
374
391
|
], template: "<ng-content></ng-content>\n", styles: [".tedi-card-header{border:1px solid var(--_card-border);background:var(--_card-bg);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-header--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-top: 0}.tedi-card-header--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-bottom: 0}.tedi-card-header--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-left: 0}.tedi-card-header--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-right: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-top: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-header--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-top-none{--_card-padding-top: 0}.tedi-card-header--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-header--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-left-none{--_card-padding-left: 0}.tedi-card-header--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-right-none{--_card-padding-right: 0}.tedi-card-header--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-card-header--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-card-header--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-card-header--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-card-header--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}\n"] }]
|
|
375
|
-
}] });
|
|
392
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
376
393
|
|
|
377
394
|
const WHITE_ICON_VARIANTS = ["brand", "brand-dark"];
|
|
378
395
|
class AccordionItemHeaderComponent {
|
|
@@ -380,35 +397,35 @@ class AccordionItemHeaderComponent {
|
|
|
380
397
|
* Whether accordion header should have indicator arrow
|
|
381
398
|
* @default false
|
|
382
399
|
*/
|
|
383
|
-
indicator = input(false);
|
|
400
|
+
indicator = input(false, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
|
|
384
401
|
/**
|
|
385
402
|
* Open button text. Visible if both openText and closeText are provided.
|
|
386
403
|
*/
|
|
387
|
-
openText = input();
|
|
404
|
+
openText = input(...(ngDevMode ? [undefined, { debugName: "openText" }] : []));
|
|
388
405
|
/**
|
|
389
406
|
* Close button text. Visible if both openText and closeText are provided.
|
|
390
407
|
*/
|
|
391
|
-
closeText = input();
|
|
408
|
+
closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
|
|
392
409
|
/**
|
|
393
410
|
* Accordion header variant
|
|
394
411
|
*/
|
|
395
|
-
variant = input();
|
|
412
|
+
variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
|
|
396
413
|
/**
|
|
397
414
|
* Accordion header background
|
|
398
415
|
*/
|
|
399
|
-
background = input();
|
|
416
|
+
background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
|
|
400
417
|
/**
|
|
401
418
|
* Color of the indicator arrow
|
|
402
419
|
*/
|
|
403
|
-
indicatorColor = input();
|
|
420
|
+
indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
|
|
404
421
|
/**
|
|
405
422
|
* Whether indicator is displayed before or after the main content
|
|
406
423
|
*/
|
|
407
|
-
indicatorPosition = input("end");
|
|
424
|
+
indicatorPosition = input("end", ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
|
|
408
425
|
/**
|
|
409
426
|
* Whether header is clickable
|
|
410
427
|
*/
|
|
411
|
-
clickable = input(true);
|
|
428
|
+
clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
|
|
412
429
|
accordionItem = inject(AccordionItemComponent);
|
|
413
430
|
opened = this.accordionItem.opened;
|
|
414
431
|
headerId = this.accordionItem.headerId;
|
|
@@ -418,7 +435,7 @@ class AccordionItemHeaderComponent {
|
|
|
418
435
|
return this.opened() ? this.closeText() : this.openText();
|
|
419
436
|
}
|
|
420
437
|
return;
|
|
421
|
-
});
|
|
438
|
+
}, ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
|
|
422
439
|
indicatorIconColor = computed(() => {
|
|
423
440
|
if (this.indicatorColor()) {
|
|
424
441
|
return this.indicatorColor();
|
|
@@ -426,14 +443,14 @@ class AccordionItemHeaderComponent {
|
|
|
426
443
|
return WHITE_ICON_VARIANTS.includes(this.variant())
|
|
427
444
|
? "white"
|
|
428
445
|
: "brand";
|
|
429
|
-
});
|
|
446
|
+
}, ...(ngDevMode ? [{ debugName: "indicatorIconColor" }] : []));
|
|
430
447
|
toggle() {
|
|
431
448
|
this.accordionItem.toggle();
|
|
432
449
|
}
|
|
433
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
450
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "tedi-card-header, [tedi-card-header]", inputs: ["variant"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
435
452
|
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
|
|
437
454
|
type: Component,
|
|
438
455
|
args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
|
|
439
456
|
CardHeaderComponent,
|
|
@@ -443,46 +460,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
443
460
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
444
461
|
"[class.tedi-accordion-item-header-host]": "true",
|
|
445
462
|
}, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
|
|
446
|
-
}] });
|
|
463
|
+
}], propDecorators: { indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
|
|
447
464
|
|
|
465
|
+
/**
|
|
466
|
+
* @deprecated Use CardRow from TEDI-ready instead. This component will be removed from future versions.
|
|
467
|
+
*/
|
|
448
468
|
class CardRowComponent {
|
|
449
469
|
/**
|
|
450
470
|
* Whether row should have separator under it.
|
|
451
471
|
* @default false
|
|
452
472
|
*/
|
|
453
|
-
hasSeparator = input(false, { transform: booleanAttribute });
|
|
454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
473
|
+
hasSeparator = input(false, ...(ngDevMode ? [{ debugName: "hasSeparator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardRowComponent, isStandalone: true, selector: "tedi-card-row", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-row": "true", "class.tedi-card-row--has-separator": "hasSeparator()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
456
476
|
}
|
|
457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, decorators: [{
|
|
458
478
|
type: Component,
|
|
459
479
|
args: [{ selector: "tedi-card-row", standalone: true, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
460
480
|
"[class.tedi-card-row]": "true",
|
|
461
481
|
"[class.tedi-card-row--has-separator]": "hasSeparator()",
|
|
462
482
|
}, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"] }]
|
|
463
|
-
}] });
|
|
483
|
+
}], propDecorators: { hasSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeparator", required: false }] }] } });
|
|
464
484
|
|
|
465
485
|
class ChoiceGroupDirective {
|
|
466
486
|
/*
|
|
467
487
|
* Variant of the cards in group.
|
|
468
488
|
*/
|
|
469
|
-
variant = input("primary");
|
|
489
|
+
variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
470
490
|
/*
|
|
471
491
|
* Whether choicegroup card has indicator
|
|
472
492
|
*/
|
|
473
|
-
hasIndicator = input(true);
|
|
493
|
+
hasIndicator = input(true, ...(ngDevMode ? [{ debugName: "hasIndicator" }] : []));
|
|
474
494
|
/*
|
|
475
495
|
* Spacing between radios. unit: px.
|
|
476
496
|
* @default 4
|
|
477
497
|
*/
|
|
478
|
-
spacing = input(4);
|
|
498
|
+
spacing = input(4, ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
479
499
|
modifierClasses = computed(() => {
|
|
480
500
|
return `tedi-choicegroup--${this.variant()}`;
|
|
481
|
-
});
|
|
482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
483
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
501
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
502
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ChoiceGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
503
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: ChoiceGroupDirective, isStandalone: true, inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hasIndicator: { classPropertyName: "hasIndicator", publicName: "hasIndicator", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-choicegroup": "true", "class.tedi-choicegroup--stacked": "spacing() === 0", "class.tedi-choicegroup--plain": "!hasIndicator()", "class": "modifierClasses()" } }, ngImport: i0 });
|
|
484
504
|
}
|
|
485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ChoiceGroupDirective, decorators: [{
|
|
486
506
|
type: Directive,
|
|
487
507
|
args: [{
|
|
488
508
|
standalone: true,
|
|
@@ -493,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
493
513
|
"[class]": "modifierClasses()",
|
|
494
514
|
},
|
|
495
515
|
}]
|
|
496
|
-
}] });
|
|
516
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hasIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndicator", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
|
|
497
517
|
|
|
498
518
|
/**
|
|
499
519
|
* @deprecated Use Checkbox from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -502,50 +522,50 @@ class CheckboxGroupComponent {
|
|
|
502
522
|
/**
|
|
503
523
|
* Checkbox group label.
|
|
504
524
|
*/
|
|
505
|
-
label = input();
|
|
525
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
506
526
|
/*
|
|
507
527
|
* Whether checkbox group is disabled
|
|
508
528
|
*/
|
|
509
|
-
disabled = input();
|
|
529
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
510
530
|
/*
|
|
511
531
|
* Whether checkbox group has error.
|
|
512
532
|
*/
|
|
513
|
-
hasError = input();
|
|
533
|
+
hasError = input(...(ngDevMode ? [undefined, { debugName: "hasError" }] : []));
|
|
514
534
|
/*
|
|
515
535
|
* Size of the checkboxes in group.
|
|
516
536
|
*/
|
|
517
|
-
size = input();
|
|
537
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
518
538
|
/*
|
|
519
539
|
* Direction in which checkboxes flow.
|
|
520
540
|
*/
|
|
521
|
-
direction = input("column");
|
|
541
|
+
direction = input("column", ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
522
542
|
/*
|
|
523
543
|
* Spacing between checkboxes. unit: px.
|
|
524
544
|
* @default 4
|
|
525
545
|
*/
|
|
526
|
-
spacing = input(4);
|
|
546
|
+
spacing = input(4, ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
527
547
|
/**
|
|
528
548
|
* FeedbackText component inputs.
|
|
529
549
|
*/
|
|
530
|
-
feedbackText = input();
|
|
550
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
531
551
|
labelId = computed(() => {
|
|
532
552
|
if (this.label()) {
|
|
533
553
|
return generateUUID();
|
|
534
554
|
}
|
|
535
555
|
return;
|
|
536
|
-
});
|
|
537
|
-
groupDisabled = computed(() => this.disabled());
|
|
538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
556
|
+
}, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
|
|
557
|
+
groupDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "groupDisabled" }] : []));
|
|
558
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
559
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxGroupComponent, isStandalone: true, selector: "tedi-checkbox-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox-group": "true", "attr.role": "'group'", "attr.aria-labelledby": "labelId()" } }, ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
540
560
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
542
562
|
type: Component,
|
|
543
563
|
args: [{ standalone: true, selector: "tedi-checkbox-group", imports: [FeedbackTextComponent, LabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
544
564
|
"[class.tedi-checkbox-group]": "true",
|
|
545
565
|
"[attr.role]": "'group'",
|
|
546
566
|
"[attr.aria-labelledby]": "labelId()",
|
|
547
567
|
}, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"] }]
|
|
548
|
-
}] });
|
|
568
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }] } });
|
|
549
569
|
|
|
550
570
|
/**
|
|
551
571
|
* @deprecated Use Checkbox with CheckboxCard label from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -554,20 +574,20 @@ class CheckboxCardGroupComponent extends CheckboxGroupComponent {
|
|
|
554
574
|
/*
|
|
555
575
|
* Direction in which checkboxes flow.
|
|
556
576
|
*/
|
|
557
|
-
direction = input("row");
|
|
577
|
+
direction = input("row", ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
558
578
|
/*
|
|
559
579
|
* Value of card group. Do not use with controlled card group.
|
|
560
580
|
*/
|
|
561
|
-
value = model([]);
|
|
562
|
-
checkboxes = contentChildren(forwardRef(() => CheckboxComponent), {
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
_controlDisabled = signal(false);
|
|
581
|
+
value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
582
|
+
checkboxes = contentChildren(forwardRef(() => CheckboxComponent), ...(ngDevMode ? [{ debugName: "checkboxes", descendants: true }] : [{
|
|
583
|
+
descendants: true,
|
|
584
|
+
}]));
|
|
585
|
+
_controlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_controlDisabled" }] : []));
|
|
566
586
|
_onChange = () => { };
|
|
567
587
|
_onTouched = () => { };
|
|
568
588
|
groupDisabled = computed(() => {
|
|
569
589
|
return this.disabled() || this._controlDisabled();
|
|
570
|
-
});
|
|
590
|
+
}, ...(ngDevMode ? [{ debugName: "groupDisabled" }] : []));
|
|
571
591
|
writeValue(value) {
|
|
572
592
|
this.value.set(value);
|
|
573
593
|
this.updateCheckboxesState();
|
|
@@ -599,8 +619,8 @@ class CheckboxCardGroupComponent extends CheckboxGroupComponent {
|
|
|
599
619
|
});
|
|
600
620
|
this._onChange(this.value());
|
|
601
621
|
}
|
|
602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
622
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxCardGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxCardGroupComponent, isStandalone: true, selector: "tedi-checkbox-card-group", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
604
624
|
{
|
|
605
625
|
provide: NG_VALUE_ACCESSOR,
|
|
606
626
|
useExisting: forwardRef(() => CheckboxCardGroupComponent),
|
|
@@ -612,7 +632,7 @@ class CheckboxCardGroupComponent extends CheckboxGroupComponent {
|
|
|
612
632
|
},
|
|
613
633
|
], queries: [{ propertyName: "checkboxes", predicate: i0.forwardRef(() => CheckboxComponent), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n", ".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
614
634
|
}
|
|
615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxCardGroupComponent, decorators: [{
|
|
616
636
|
type: Component,
|
|
617
637
|
args: [{ standalone: true, selector: "tedi-checkbox-card-group", imports: [FeedbackTextComponent, LabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
618
638
|
{
|
|
@@ -630,7 +650,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
630
650
|
inputs: ["variant", "hasIndicator", "spacing"],
|
|
631
651
|
},
|
|
632
652
|
], template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n", ".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"] }]
|
|
633
|
-
}] })
|
|
653
|
+
}], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], checkboxes: [{ type: i0.ContentChildren, args: [forwardRef(() => CheckboxComponent), { ...{
|
|
654
|
+
descendants: true,
|
|
655
|
+
}, isSignal: true }] }] } });
|
|
634
656
|
|
|
635
657
|
/**
|
|
636
658
|
* @deprecated Use Checkbox from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -639,35 +661,35 @@ class CheckboxComponent {
|
|
|
639
661
|
/*
|
|
640
662
|
* unique id.
|
|
641
663
|
*/
|
|
642
|
-
inputId = input.required();
|
|
664
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
643
665
|
/*
|
|
644
666
|
* Whether checkbox is checked. Do not used with controlled checkboxes.
|
|
645
667
|
*/
|
|
646
|
-
checked = model(null);
|
|
668
|
+
checked = model(null, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
647
669
|
/*
|
|
648
670
|
* Whether checkbox is indeterminate.
|
|
649
671
|
*/
|
|
650
|
-
indeterminate = model();
|
|
672
|
+
indeterminate = model(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
|
|
651
673
|
/*
|
|
652
674
|
* Checkbox value. For use in checkbox card group
|
|
653
675
|
*/
|
|
654
|
-
value = input();
|
|
676
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
655
677
|
/*
|
|
656
678
|
* Whether checkbox is disabled.
|
|
657
679
|
*/
|
|
658
|
-
disabled = model();
|
|
680
|
+
disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
659
681
|
/*
|
|
660
682
|
* Size of the checkbox. Overwrites group size.
|
|
661
683
|
*/
|
|
662
|
-
size = input();
|
|
684
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
663
685
|
/*
|
|
664
686
|
* Whether checkbox has error.
|
|
665
687
|
*/
|
|
666
|
-
hasError = input();
|
|
688
|
+
hasError = input(...(ngDevMode ? [undefined, { debugName: "hasError" }] : []));
|
|
667
689
|
/**
|
|
668
690
|
* FeedbackText component inputs.
|
|
669
691
|
*/
|
|
670
|
-
feedbackText = input();
|
|
692
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
671
693
|
_inputEl = viewChild.required("input");
|
|
672
694
|
checkboxGroup = inject(CheckboxGroupComponent, { optional: true });
|
|
673
695
|
checkboxCardGroup = inject(CheckboxCardGroupComponent, {
|
|
@@ -680,7 +702,7 @@ class CheckboxComponent {
|
|
|
680
702
|
return generateUUID();
|
|
681
703
|
}
|
|
682
704
|
return;
|
|
683
|
-
});
|
|
705
|
+
}, ...(ngDevMode ? [{ debugName: "feedbackTextId" }] : []));
|
|
684
706
|
indicatorIcon = computed(() => {
|
|
685
707
|
if (this.indeterminate()) {
|
|
686
708
|
return "remove";
|
|
@@ -689,16 +711,16 @@ class CheckboxComponent {
|
|
|
689
711
|
return "check";
|
|
690
712
|
}
|
|
691
713
|
return;
|
|
692
|
-
});
|
|
714
|
+
}, ...(ngDevMode ? [{ debugName: "indicatorIcon" }] : []));
|
|
693
715
|
checkboxSize = computed(() => {
|
|
694
716
|
return this.size() ?? this.checkboxGroup?.size();
|
|
695
|
-
});
|
|
717
|
+
}, ...(ngDevMode ? [{ debugName: "checkboxSize" }] : []));
|
|
696
718
|
iconSize = computed(() => {
|
|
697
719
|
return this.checkboxSize() === "large" ? 18 : 16;
|
|
698
|
-
});
|
|
720
|
+
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
699
721
|
checkboxDisabled = computed(() => {
|
|
700
722
|
return this.disabled() || this.checkboxGroup?.groupDisabled();
|
|
701
|
-
});
|
|
723
|
+
}, ...(ngDevMode ? [{ debugName: "checkboxDisabled" }] : []));
|
|
702
724
|
focus() {
|
|
703
725
|
this._inputEl().nativeElement.focus();
|
|
704
726
|
}
|
|
@@ -726,8 +748,8 @@ class CheckboxComponent {
|
|
|
726
748
|
this._onChange(true);
|
|
727
749
|
}
|
|
728
750
|
}
|
|
729
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
730
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
752
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "tedi-checkbox", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, host: { properties: { "class.tedi-checkbox": "true", "class.tedi-checkbox--error": "hasError() || cardGroup?.hasError()", "class.tedi-checkbox--large": "checkboxSize() === 'large'" } }, providers: [
|
|
731
753
|
{
|
|
732
754
|
provide: NG_VALUE_ACCESSOR,
|
|
733
755
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
@@ -735,7 +757,7 @@ class CheckboxComponent {
|
|
|
735
757
|
},
|
|
736
758
|
], viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-checkbox__input-area\">\n <input\n class=\"tedi-checkbox__input\"\n type=\"checkbox\"\n #input\n [id]=\"inputId()\"\n [checked]=\"checked()\"\n [disabled]=\"checkboxDisabled()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"_onTouched()\"\n />\n <div class=\"tedi-checkbox__indicator\">\n @if (indicatorIcon(); as iconName) {\n <tedi-icon [name]=\"iconName\" color=\"white\" [size]=\"iconSize()\" />\n }\n </div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-checkbox__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox{--_checkbox-bg: var(--form-checkbox-radio-default-background-default);--_checkbox-border: var(--form-checkbox-radio-default-border-default);--_checkbox-label-color: var(--general-text-primary);--_checkbox-check-color: var(--_checkbox-border);--_checkbox-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_checkbox-size: var(--form-checkbox-radio-size-responsive);--_checkbox-radius: var(--form-checkbox-radio-indicator-radius-checkbox);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-checkbox tedi-icon{-webkit-user-select:none;user-select:none}.tedi-checkbox__input-area{position:relative;grid-area:input-area}.tedi-checkbox__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-checkbox__indicator{position:relative;width:var(--_checkbox-size);height:var(--_checkbox-size);border-radius:var(--_checkbox-radius);border:1px solid var(--_checkbox-border);background:var(--_checkbox-bg);margin-right:var(--_checkbox-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-checkbox__label{color:var(--_checkbox-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-checkbox:has(input:checked,input:indeterminate){--_checkbox-bg: var(--form-checkbox-radio-default-background-selected);--_checkbox-border: var(--form-checkbox-radio-default-border-selected)}.tedi-checkbox:has(input:hover,input:focus-visible) .tedi-checkbox__indicator{outline:1px solid var(--_checkbox-border)}.tedi-checkbox:has(input:hover,input:focus-visible){--_checkbox-border: var(--form-checkbox-radio-default-border-hover)}.tedi-checkbox:has(input:active){--_checkbox-border: var(--form-checkbox-radio-default-border-active);--_checkbox-bg: var(--form-checkbox-radio-default-background-active)}.tedi-checkbox:has(input:disabled){pointer-events:none;--_checkbox-label-color: var(--general-text-disabled);--_checkbox-bg: var(--form-input-background-disabled);--_checkbox-border: var(--form-input-border-disabled)}.tedi-checkbox:has(input:disabled:checked){--_checkbox-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-checkbox--error{--_checkbox-bg: var(--form-checkbox-radio-default-background-error);--_checkbox-border: var(--form-general-feedback-error-border)}.tedi-checkbox--large{--_checkbox-size: var(--form-checkbox-radio-size-large)}.tedi-checkbox .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
737
759
|
}
|
|
738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
739
761
|
type: Component,
|
|
740
762
|
args: [{ standalone: true, selector: "tedi-checkbox", imports: [FeedbackTextComponent, IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
741
763
|
{
|
|
@@ -748,13 +770,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
748
770
|
"[class.tedi-checkbox--error]": "hasError() || cardGroup?.hasError()",
|
|
749
771
|
"[class.tedi-checkbox--large]": "checkboxSize() === 'large'",
|
|
750
772
|
}, template: "<div class=\"tedi-checkbox__input-area\">\n <input\n class=\"tedi-checkbox__input\"\n type=\"checkbox\"\n #input\n [id]=\"inputId()\"\n [checked]=\"checked()\"\n [disabled]=\"checkboxDisabled()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"_onTouched()\"\n />\n <div class=\"tedi-checkbox__indicator\">\n @if (indicatorIcon(); as iconName) {\n <tedi-icon [name]=\"iconName\" color=\"white\" [size]=\"iconSize()\" />\n }\n </div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-checkbox__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox{--_checkbox-bg: var(--form-checkbox-radio-default-background-default);--_checkbox-border: var(--form-checkbox-radio-default-border-default);--_checkbox-label-color: var(--general-text-primary);--_checkbox-check-color: var(--_checkbox-border);--_checkbox-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_checkbox-size: var(--form-checkbox-radio-size-responsive);--_checkbox-radius: var(--form-checkbox-radio-indicator-radius-checkbox);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-checkbox tedi-icon{-webkit-user-select:none;user-select:none}.tedi-checkbox__input-area{position:relative;grid-area:input-area}.tedi-checkbox__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-checkbox__indicator{position:relative;width:var(--_checkbox-size);height:var(--_checkbox-size);border-radius:var(--_checkbox-radius);border:1px solid var(--_checkbox-border);background:var(--_checkbox-bg);margin-right:var(--_checkbox-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-checkbox__label{color:var(--_checkbox-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-checkbox:has(input:checked,input:indeterminate){--_checkbox-bg: var(--form-checkbox-radio-default-background-selected);--_checkbox-border: var(--form-checkbox-radio-default-border-selected)}.tedi-checkbox:has(input:hover,input:focus-visible) .tedi-checkbox__indicator{outline:1px solid var(--_checkbox-border)}.tedi-checkbox:has(input:hover,input:focus-visible){--_checkbox-border: var(--form-checkbox-radio-default-border-hover)}.tedi-checkbox:has(input:active){--_checkbox-border: var(--form-checkbox-radio-default-border-active);--_checkbox-bg: var(--form-checkbox-radio-default-background-active)}.tedi-checkbox:has(input:disabled){pointer-events:none;--_checkbox-label-color: var(--general-text-disabled);--_checkbox-bg: var(--form-input-background-disabled);--_checkbox-border: var(--form-input-border-disabled)}.tedi-checkbox:has(input:disabled:checked){--_checkbox-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-checkbox--error{--_checkbox-bg: var(--form-checkbox-radio-default-background-error);--_checkbox-border: var(--form-general-feedback-error-border)}.tedi-checkbox--large{--_checkbox-size: var(--form-checkbox-radio-size-large)}.tedi-checkbox .tedi-feedback-text{grid-area:feedback}\n"] }]
|
|
751
|
-
}] });
|
|
773
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], _inputEl: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }] } });
|
|
752
774
|
|
|
753
775
|
class FormFieldComponent {
|
|
754
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
755
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
776
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
777
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", host: { properties: { "class.tedi-form-field": "true" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-form-field{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
756
778
|
}
|
|
757
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
758
780
|
type: Component,
|
|
759
781
|
args: [{ selector: "tedi-form-field", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
760
782
|
"[class.tedi-form-field]": "true",
|
|
@@ -769,12 +791,12 @@ class InputComponent {
|
|
|
769
791
|
* Size of the input.
|
|
770
792
|
* @default default
|
|
771
793
|
*/
|
|
772
|
-
size = input("default");
|
|
794
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
773
795
|
/**
|
|
774
796
|
* State of the input.
|
|
775
797
|
* @default default
|
|
776
798
|
*/
|
|
777
|
-
state = input("default");
|
|
799
|
+
state = input("default", ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
778
800
|
modifierClasses = computed(() => {
|
|
779
801
|
const modifiers = [];
|
|
780
802
|
if (this.size())
|
|
@@ -782,17 +804,17 @@ class InputComponent {
|
|
|
782
804
|
if (this.state())
|
|
783
805
|
modifiers.push(`tedi-input--${this.state()}`);
|
|
784
806
|
return modifiers.join(" ");
|
|
785
|
-
});
|
|
786
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
787
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
807
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
808
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InputComponent, isStandalone: true, selector: "[tedi-input]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-input": "true", "class": "modifierClasses()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_form-field-outer-gap: var(--form-field-outer-spacing);padding:var(--_padding-y) var(--_padding-x);border-radius:var(--_border-radius);font-size:var(--_font-size);line-height:var(--_line-height);border:1px solid;border-color:var(--_border-color);color:var(--_color);background-color:var(--_background-color);margin-bottom:var(--_form-field-outer-gap);font-family:var(--family-default)}.tedi-input:focus,.tedi-input:active{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:disabled,.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input::placeholder{color:var(--_placeholder-color)}.tedi-input--error:not(:disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(:disabled):focus,.tedi-input--error:not(:disabled):active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(:disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(:disabled):focus,.tedi-input--valid:not(:disabled):active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
788
810
|
}
|
|
789
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputComponent, decorators: [{
|
|
790
812
|
type: Component,
|
|
791
813
|
args: [{ selector: "[tedi-input]", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
792
814
|
"[class.tedi-input]": "true",
|
|
793
815
|
"[class]": "modifierClasses()",
|
|
794
816
|
}, styles: [".tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_form-field-outer-gap: var(--form-field-outer-spacing);padding:var(--_padding-y) var(--_padding-x);border-radius:var(--_border-radius);font-size:var(--_font-size);line-height:var(--_line-height);border:1px solid;border-color:var(--_border-color);color:var(--_color);background-color:var(--_background-color);margin-bottom:var(--_form-field-outer-gap);font-family:var(--family-default)}.tedi-input:focus,.tedi-input:active{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:disabled,.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input::placeholder{color:var(--_placeholder-color)}.tedi-input--error:not(:disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(:disabled):focus,.tedi-input--error:not(:disabled):active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(:disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(:disabled):focus,.tedi-input--valid:not(:disabled):active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm)}\n"] }]
|
|
795
|
-
}] });
|
|
817
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
|
|
796
818
|
|
|
797
819
|
/**
|
|
798
820
|
* InputGroupComponent is a component that allows you to group multiple input elements together.
|
|
@@ -811,28 +833,28 @@ class InputGroupComponent {
|
|
|
811
833
|
/**
|
|
812
834
|
* User-visible label for the input group, visible above the input, should describe the purpose of the input group.
|
|
813
835
|
*/
|
|
814
|
-
label = input();
|
|
836
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
815
837
|
/**
|
|
816
838
|
* ID of the input group's label, used to associate the label with the input group's custom input.
|
|
817
839
|
*/
|
|
818
|
-
labelID = input();
|
|
840
|
+
labelID = input(...(ngDevMode ? [undefined, { debugName: "labelID" }] : []));
|
|
819
841
|
/**
|
|
820
842
|
* Disabled state of the input group, causes the input group to be grayed out.
|
|
821
843
|
* Does not affect children's disabled state.
|
|
822
844
|
* @default false
|
|
823
845
|
*/
|
|
824
|
-
disabled = input(false);
|
|
846
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
825
847
|
/**
|
|
826
848
|
* FeedbackText component inputs, displayed below the input group.
|
|
827
849
|
*/
|
|
828
|
-
feedback = input();
|
|
829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
850
|
+
feedback = input(...(ngDevMode ? [undefined, { debugName: "feedback" }] : []));
|
|
851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: InputGroupComponent, isStandalone: true, selector: "tedi-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelID: { classPropertyName: "labelID", publicName: "labelID", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--tedi-radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--tedi-dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--tedi-borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--tedi-neutral-350);--_input-group-disabled-background-color: var(--tedi-neutral-300);--_input-group-text-disabled-color: var(--tedi-neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;--_input-group-padding-x: var(--form-field-padding-x-md-default);--_input-group-padding-y: var(--form-field-padding-y-md-default);display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
831
853
|
}
|
|
832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputGroupComponent, decorators: [{
|
|
833
855
|
type: Component,
|
|
834
856
|
args: [{ selector: "tedi-input-group", standalone: true, encapsulation: ViewEncapsulation.None, imports: [FeedbackTextComponent, LabelComponent], template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--tedi-radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--tedi-dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--tedi-borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--tedi-neutral-350);--_input-group-disabled-background-color: var(--tedi-neutral-300);--_input-group-text-disabled-color: var(--tedi-neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;--_input-group-padding-x: var(--form-field-padding-x-md-default);--_input-group-padding-y: var(--form-field-padding-y-md-default);display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"] }]
|
|
835
|
-
}] });
|
|
857
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelID: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelID", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }] } });
|
|
836
858
|
|
|
837
859
|
/**
|
|
838
860
|
* @deprecated Use Radio from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -841,50 +863,50 @@ class RadioGroupComponent {
|
|
|
841
863
|
/*
|
|
842
864
|
* Radio group name
|
|
843
865
|
*/
|
|
844
|
-
name = input.required();
|
|
866
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
845
867
|
/*
|
|
846
868
|
* Radio group id.
|
|
847
869
|
*/
|
|
848
|
-
id = input.required();
|
|
870
|
+
id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
849
871
|
/**
|
|
850
872
|
* Radio group label.
|
|
851
873
|
*/
|
|
852
|
-
label = input();
|
|
874
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
853
875
|
/*
|
|
854
876
|
* Whether radio group is disabled. Do not use with controlled radios.
|
|
855
877
|
*/
|
|
856
|
-
disabled = input();
|
|
878
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
857
879
|
/*
|
|
858
880
|
* Whether radio group has error.
|
|
859
881
|
*/
|
|
860
|
-
hasError = input();
|
|
882
|
+
hasError = input(...(ngDevMode ? [undefined, { debugName: "hasError" }] : []));
|
|
861
883
|
/*
|
|
862
884
|
* Size of the radios radios in group.
|
|
863
885
|
*/
|
|
864
|
-
size = input("default");
|
|
886
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
865
887
|
/*
|
|
866
888
|
* Direction in which radios flow.
|
|
867
889
|
*/
|
|
868
|
-
direction = input("column");
|
|
890
|
+
direction = input("column", ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
869
891
|
/*
|
|
870
892
|
* Spacing between radios. unit: px.
|
|
871
893
|
* @default 4
|
|
872
894
|
*/
|
|
873
|
-
spacing = input(4);
|
|
895
|
+
spacing = input(4, ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
874
896
|
/**
|
|
875
897
|
* FeedbackText component inputs.
|
|
876
898
|
*/
|
|
877
|
-
feedbackText = input();
|
|
899
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
878
900
|
/*
|
|
879
901
|
* Emits selected radio value on change.
|
|
880
902
|
*/
|
|
881
903
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
882
904
|
change = output();
|
|
883
|
-
_value = signal(null);
|
|
884
|
-
_controlDisabled = signal(false);
|
|
905
|
+
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
906
|
+
_controlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_controlDisabled" }] : []));
|
|
885
907
|
groupDisabled = computed(() => {
|
|
886
908
|
return this.disabled() || this._controlDisabled();
|
|
887
|
-
});
|
|
909
|
+
}, ...(ngDevMode ? [{ debugName: "groupDisabled" }] : []));
|
|
888
910
|
groupValue = this._value.asReadonly();
|
|
889
911
|
_onChange = () => { };
|
|
890
912
|
_onTouched = () => { };
|
|
@@ -904,8 +926,8 @@ class RadioGroupComponent {
|
|
|
904
926
|
this._onChange(value);
|
|
905
927
|
this.change.emit(value);
|
|
906
928
|
}
|
|
907
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
908
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
929
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
930
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RadioGroupComponent, isStandalone: true, selector: "tedi-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.tedi-radio-group": "true", "attr.role": "'radiogroup'" } }, providers: [
|
|
909
931
|
{
|
|
910
932
|
provide: NG_VALUE_ACCESSOR,
|
|
911
933
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
@@ -913,7 +935,7 @@ class RadioGroupComponent {
|
|
|
913
935
|
},
|
|
914
936
|
], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
915
937
|
}
|
|
916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
917
939
|
type: Component,
|
|
918
940
|
args: [{ selector: "tedi-radio-group", standalone: true, imports: [FeedbackTextComponent, LabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
919
941
|
{
|
|
@@ -925,7 +947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
925
947
|
"[class.tedi-radio-group]": "true",
|
|
926
948
|
"[attr.role]": "'radiogroup'",
|
|
927
949
|
}, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n"] }]
|
|
928
|
-
}] });
|
|
950
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
929
951
|
|
|
930
952
|
/**
|
|
931
953
|
* @deprecated Use Radio from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -934,44 +956,44 @@ class RadioComponent {
|
|
|
934
956
|
/*
|
|
935
957
|
* unique id.
|
|
936
958
|
*/
|
|
937
|
-
inputId = input.required();
|
|
959
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
938
960
|
/*
|
|
939
961
|
* Whether radio is checked. Do not used with controlled radios.
|
|
940
962
|
*/
|
|
941
|
-
checked = model();
|
|
963
|
+
checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
|
|
942
964
|
/*
|
|
943
965
|
* Radio value.
|
|
944
966
|
*/
|
|
945
|
-
value = input.required();
|
|
967
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
946
968
|
/*
|
|
947
969
|
* Whether radio is disabled.
|
|
948
970
|
*/
|
|
949
|
-
disabled = input();
|
|
971
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
950
972
|
/*
|
|
951
973
|
* Whether radio has error.
|
|
952
974
|
*/
|
|
953
|
-
hasError = input();
|
|
975
|
+
hasError = input(...(ngDevMode ? [undefined, { debugName: "hasError" }] : []));
|
|
954
976
|
/**
|
|
955
977
|
* FeedbackText component inputs.
|
|
956
978
|
*/
|
|
957
|
-
feedbackText = input();
|
|
979
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
958
980
|
_inputEl = viewChild.required("input");
|
|
959
981
|
radioGroup = inject(RadioGroupComponent, { optional: true });
|
|
960
982
|
inputDisabled = computed(() => {
|
|
961
983
|
return this.disabled() || this.radioGroup?.groupDisabled();
|
|
962
|
-
});
|
|
984
|
+
}, ...(ngDevMode ? [{ debugName: "inputDisabled" }] : []));
|
|
963
985
|
inputName = computed(() => {
|
|
964
986
|
return this.radioGroup?.name();
|
|
965
|
-
});
|
|
987
|
+
}, ...(ngDevMode ? [{ debugName: "inputName" }] : []));
|
|
966
988
|
inputChecked = computed(() => {
|
|
967
989
|
return this.value() === this.radioGroup?.groupValue() || this.checked();
|
|
968
|
-
});
|
|
990
|
+
}, ...(ngDevMode ? [{ debugName: "inputChecked" }] : []));
|
|
969
991
|
feedbackTextId = computed(() => {
|
|
970
992
|
if (this.feedbackText()) {
|
|
971
993
|
return generateUUID();
|
|
972
994
|
}
|
|
973
995
|
return;
|
|
974
|
-
});
|
|
996
|
+
}, ...(ngDevMode ? [{ debugName: "feedbackTextId" }] : []));
|
|
975
997
|
focus() {
|
|
976
998
|
this._inputEl().nativeElement.focus();
|
|
977
999
|
}
|
|
@@ -984,17 +1006,17 @@ class RadioComponent {
|
|
|
984
1006
|
this.radioGroup?.selectRadio(this.value());
|
|
985
1007
|
}
|
|
986
1008
|
}
|
|
987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
988
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1009
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RadioComponent, isStandalone: true, selector: "tedi-radio", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.tedi-radio": "true", "class.tedi-radio--error": "hasError() || radioGroup?.hasError()", "class.tedi-radio--large": "radioGroup?.size() === 'large'" } }, viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-radio__input-area\">\n <input\n class=\"tedi-radio__input\"\n type=\"radio\"\n #input\n [id]=\"inputId()\"\n [checked]=\"inputChecked()\"\n [disabled]=\"inputDisabled()\"\n [attr.name]=\"inputName()\"\n [attr.value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n (change)=\"onInputChange($event)\"\n />\n <div class=\"tedi-radio__indicator\"></div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-radio__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio{--_radio-bg: var(--form-checkbox-radio-default-background-default);--_radio-border: var(--form-checkbox-radio-default-border-default);--_radio-label-color: var(--general-text-primary);--_radio-dot-bg: var(--_radio-border);--_radio-dot-size: 12px;--_radio-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_radio-size: var(--form-checkbox-radio-size-responsive);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-radio__input-area{position:relative;grid-area:input-area}.tedi-radio__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-radio__indicator{position:relative;width:var(--_radio-size);height:var(--_radio-size);border-radius:50%;border:1px solid var(--_radio-border);background:var(--_radio-bg);margin-right:var(--_radio-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-radio__indicator:after{content:\"\";border-radius:50%;display:none;background:var(--_radio-dot-bg);height:var(--_radio-dot-size);width:var(--_radio-dot-size)}.tedi-radio__label{color:var(--_radio-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-radio:has(input:checked) .tedi-radio__indicator:after{display:block}.tedi-radio:has(input:checked){--_radio-border: var(--form-checkbox-radio-default-border-selected)}.tedi-radio:has(input:hover,input:focus-visible) .tedi-radio__indicator{outline:1px solid var(--_radio-border)}.tedi-radio:has(input:hover,input:focus-visible){--_radio-border: var(--form-checkbox-radio-default-border-hover)}.tedi-radio:has(input:active){--_radio-border: var(--form-checkbox-radio-default-border-active)}.tedi-radio:has(input:disabled){pointer-events:none;--_radio-label-color: var(--general-text-disabled);--_radio-bg: var(--form-input-background-disabled);--_radio-border: var(--form-input-border-disabled)}.tedi-radio:has(input:disabled:checked){--_radio-dot-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_radio-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-radio--error{--_radio-bg: var(--form-checkbox-radio-default-background-error);--_radio-border: var(--form-general-feedback-error-border)}.tedi-radio--large{--_radio-dot-size: 16px;--_radio-size: var(--form-checkbox-radio-size-large)}.tedi-radio .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
989
1011
|
}
|
|
990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioComponent, decorators: [{
|
|
991
1013
|
type: Component,
|
|
992
1014
|
args: [{ selector: "tedi-radio", imports: [FeedbackTextComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
993
1015
|
"[class.tedi-radio]": "true",
|
|
994
1016
|
"[class.tedi-radio--error]": "hasError() || radioGroup?.hasError()",
|
|
995
1017
|
"[class.tedi-radio--large]": "radioGroup?.size() === 'large'",
|
|
996
1018
|
}, template: "<div class=\"tedi-radio__input-area\">\n <input\n class=\"tedi-radio__input\"\n type=\"radio\"\n #input\n [id]=\"inputId()\"\n [checked]=\"inputChecked()\"\n [disabled]=\"inputDisabled()\"\n [attr.name]=\"inputName()\"\n [attr.value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n (change)=\"onInputChange($event)\"\n />\n <div class=\"tedi-radio__indicator\"></div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-radio__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio{--_radio-bg: var(--form-checkbox-radio-default-background-default);--_radio-border: var(--form-checkbox-radio-default-border-default);--_radio-label-color: var(--general-text-primary);--_radio-dot-bg: var(--_radio-border);--_radio-dot-size: 12px;--_radio-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_radio-size: var(--form-checkbox-radio-size-responsive);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-radio__input-area{position:relative;grid-area:input-area}.tedi-radio__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-radio__indicator{position:relative;width:var(--_radio-size);height:var(--_radio-size);border-radius:50%;border:1px solid var(--_radio-border);background:var(--_radio-bg);margin-right:var(--_radio-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-radio__indicator:after{content:\"\";border-radius:50%;display:none;background:var(--_radio-dot-bg);height:var(--_radio-dot-size);width:var(--_radio-dot-size)}.tedi-radio__label{color:var(--_radio-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-radio:has(input:checked) .tedi-radio__indicator:after{display:block}.tedi-radio:has(input:checked){--_radio-border: var(--form-checkbox-radio-default-border-selected)}.tedi-radio:has(input:hover,input:focus-visible) .tedi-radio__indicator{outline:1px solid var(--_radio-border)}.tedi-radio:has(input:hover,input:focus-visible){--_radio-border: var(--form-checkbox-radio-default-border-hover)}.tedi-radio:has(input:active){--_radio-border: var(--form-checkbox-radio-default-border-active)}.tedi-radio:has(input:disabled){pointer-events:none;--_radio-label-color: var(--general-text-disabled);--_radio-bg: var(--form-input-background-disabled);--_radio-border: var(--form-input-border-disabled)}.tedi-radio:has(input:disabled:checked){--_radio-dot-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_radio-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-radio--error{--_radio-bg: var(--form-checkbox-radio-default-background-error);--_radio-border: var(--form-general-feedback-error-border)}.tedi-radio--large{--_radio-dot-size: 16px;--_radio-size: var(--form-checkbox-radio-size-large)}.tedi-radio .tedi-feedback-text{grid-area:feedback}\n"] }]
|
|
997
|
-
}] });
|
|
1019
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], _inputEl: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }] } });
|
|
998
1020
|
|
|
999
1021
|
/**
|
|
1000
1022
|
* @deprecated Use Radio with RadioCard label from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -1003,9 +1025,9 @@ class RadioCardGroupComponent extends RadioGroupComponent {
|
|
|
1003
1025
|
/*
|
|
1004
1026
|
* Direction in which radios flow.
|
|
1005
1027
|
*/
|
|
1006
|
-
direction = input("row");
|
|
1007
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1008
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1028
|
+
direction = input("row", ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
1029
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioCardGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1030
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RadioCardGroupComponent, isStandalone: true, selector: "tedi-radio-card-group", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1009
1031
|
{
|
|
1010
1032
|
provide: NG_VALUE_ACCESSOR,
|
|
1011
1033
|
useExisting: forwardRef(() => RadioCardGroupComponent),
|
|
@@ -1018,7 +1040,7 @@ class RadioCardGroupComponent extends RadioGroupComponent {
|
|
|
1018
1040
|
},
|
|
1019
1041
|
], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n", ".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1020
1042
|
}
|
|
1021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioCardGroupComponent, decorators: [{
|
|
1022
1044
|
type: Component,
|
|
1023
1045
|
args: [{ standalone: true, selector: "tedi-radio-card-group", imports: [FeedbackTextComponent, LabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1024
1046
|
{
|
|
@@ -1037,32 +1059,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1037
1059
|
inputs: ["variant", "hasIndicator", "spacing"],
|
|
1038
1060
|
},
|
|
1039
1061
|
], template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n", ".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n"] }]
|
|
1040
|
-
}] });
|
|
1062
|
+
}], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
|
|
1041
1063
|
|
|
1042
1064
|
class SelectOptionComponent {
|
|
1043
1065
|
/**
|
|
1044
1066
|
* Value of the option
|
|
1045
1067
|
*/
|
|
1046
|
-
value = input.required();
|
|
1068
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1047
1069
|
/**
|
|
1048
1070
|
* Label of the option
|
|
1049
1071
|
*/
|
|
1050
|
-
label = input.required();
|
|
1072
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1051
1073
|
/**
|
|
1052
1074
|
* Whether the option is disabled
|
|
1053
1075
|
*/
|
|
1054
|
-
disabled = input(false);
|
|
1076
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1055
1077
|
/**
|
|
1056
1078
|
* Group the option belongs to
|
|
1057
1079
|
* This is used for grouping options in the dropdown.
|
|
1058
1080
|
* If not provided, the option will not be grouped.
|
|
1059
1081
|
*/
|
|
1060
|
-
group = input(null);
|
|
1061
|
-
templateRef = viewChild(TemplateRef);
|
|
1062
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1082
|
+
group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
1083
|
+
templateRef = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
|
|
1084
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1085
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: SelectOptionComponent, isStandalone: true, selector: "tedi-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content /></ng-template>", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1064
1086
|
}
|
|
1065
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
1066
1088
|
type: Component,
|
|
1067
1089
|
args: [{
|
|
1068
1090
|
selector: "tedi-select-option",
|
|
@@ -1072,7 +1094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1072
1094
|
encapsulation: ViewEncapsulation.None,
|
|
1073
1095
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1074
1096
|
}]
|
|
1075
|
-
}] });
|
|
1097
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
1076
1098
|
|
|
1077
1099
|
class DropdownTriggerDirective {
|
|
1078
1100
|
dropdownContext = inject(DropdownComponent);
|
|
@@ -1087,14 +1109,14 @@ class DropdownTriggerDirective {
|
|
|
1087
1109
|
? this.dropdownContext.dropdownId()
|
|
1088
1110
|
: undefined,
|
|
1089
1111
|
};
|
|
1090
|
-
});
|
|
1112
|
+
}, ...(ngDevMode ? [{ debugName: "ariaAttributes" }] : []));
|
|
1091
1113
|
onClick() {
|
|
1092
1114
|
this.dropdownContext.toggle();
|
|
1093
1115
|
}
|
|
1094
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1095
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1117
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-has-popup": "ariaAttributes().hasPopup", "attr.aria-expanded": "ariaAttributes().expanded", "attr.aria-controls": "ariaAttributes().controls" } }, hostDirectives: [{ directive: i2.CdkOverlayOrigin }], ngImport: i0 });
|
|
1096
1118
|
}
|
|
1097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
|
|
1098
1120
|
type: Directive,
|
|
1099
1121
|
args: [{
|
|
1100
1122
|
selector: "[tedi-dropdown-trigger]",
|
|
@@ -1110,16 +1132,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1110
1132
|
|
|
1111
1133
|
class DropdownComponent {
|
|
1112
1134
|
injector = inject(Injector);
|
|
1113
|
-
dropdownId = input.required();
|
|
1114
|
-
dropdownRole = input();
|
|
1115
|
-
opened = model(false);
|
|
1135
|
+
dropdownId = input.required(...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
|
|
1136
|
+
dropdownRole = input(...(ngDevMode ? [undefined, { debugName: "dropdownRole" }] : []));
|
|
1137
|
+
opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
|
|
1116
1138
|
triggerDirective = contentChild.required(DropdownTriggerDirective);
|
|
1117
|
-
dropdownItems = contentChildren(forwardRef(() => DropdownItemComponent), { descendants: true });
|
|
1139
|
+
dropdownItems = contentChildren(forwardRef(() => DropdownItemComponent), ...(ngDevMode ? [{ debugName: "dropdownItems", descendants: true }] : [{ descendants: true }]));
|
|
1118
1140
|
isMobile = inject(BreakpointService).isBelowBreakpoint("sm");
|
|
1119
1141
|
keyManager;
|
|
1120
1142
|
overlayOrigin = computed(() => {
|
|
1121
1143
|
return this.triggerDirective().overlayOrigin;
|
|
1122
|
-
});
|
|
1144
|
+
}, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
|
|
1123
1145
|
toggle() {
|
|
1124
1146
|
this.opened.update((wasOpened) => !wasOpened);
|
|
1125
1147
|
}
|
|
@@ -1132,34 +1154,34 @@ class DropdownComponent {
|
|
|
1132
1154
|
ngOnInit() {
|
|
1133
1155
|
this.keyManager = new FocusKeyManager(this.dropdownItems, this.injector).withWrap();
|
|
1134
1156
|
}
|
|
1135
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1136
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: true, isRequired: true, transformFunction: null }, dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownItems", predicate: i0.forwardRef(() => DropdownItemComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n padding=\"none\"\n class=\"tedi-dropdown__card\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1137
1159
|
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
1139
1161
|
type: Component,
|
|
1140
1162
|
args: [{ selector: "tedi-dropdown", imports: [
|
|
1141
1163
|
OverlayModule,
|
|
1142
1164
|
CardComponent,
|
|
1143
1165
|
CardContentComponent,
|
|
1144
1166
|
ClosingButtonComponent,
|
|
1145
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n padding=\"none\"\n class=\"tedi-dropdown__card\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media
|
|
1146
|
-
}] });
|
|
1167
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n padding=\"none\"\n class=\"tedi-dropdown__card\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"] }]
|
|
1168
|
+
}], propDecorators: { dropdownId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownId", required: true }] }], dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownTriggerDirective), { isSignal: true }] }], dropdownItems: [{ type: i0.ContentChildren, args: [forwardRef(() => DropdownItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
1147
1169
|
|
|
1148
1170
|
const itemRole = {
|
|
1149
1171
|
menu: "menuitem",
|
|
1150
1172
|
listbox: "option",
|
|
1151
1173
|
};
|
|
1152
1174
|
class DropdownItemComponent {
|
|
1153
|
-
element;
|
|
1175
|
+
element = inject(ElementRef);
|
|
1154
1176
|
/**
|
|
1155
1177
|
* Applies the selected style to the dropdown item.
|
|
1156
1178
|
*/
|
|
1157
|
-
selected = input(false);
|
|
1179
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
1158
1180
|
/**
|
|
1159
1181
|
* Applies the disabled style to the dropdown item.
|
|
1160
1182
|
*/
|
|
1161
1183
|
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
1162
|
-
disabledInput = input(false, { alias: "disabled" });
|
|
1184
|
+
disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: "disabled" }] : [{ alias: "disabled" }]));
|
|
1163
1185
|
disabled; // for cdk/a11y keymanager
|
|
1164
1186
|
itemSelected = output();
|
|
1165
1187
|
dropdownContext = inject(DropdownComponent, { optional: true });
|
|
@@ -1173,7 +1195,7 @@ class DropdownItemComponent {
|
|
|
1173
1195
|
selected: dropdownRole === "listbox" ? String(this.selected()) : undefined,
|
|
1174
1196
|
tabIndex: 0,
|
|
1175
1197
|
};
|
|
1176
|
-
});
|
|
1198
|
+
}, ...(ngDevMode ? [{ debugName: "ariaAttributes" }] : []));
|
|
1177
1199
|
focus() {
|
|
1178
1200
|
this.element.nativeElement.focus();
|
|
1179
1201
|
}
|
|
@@ -1193,16 +1215,15 @@ class DropdownItemComponent {
|
|
|
1193
1215
|
this.dropdownContext?.close();
|
|
1194
1216
|
this.itemSelected.emit();
|
|
1195
1217
|
}
|
|
1196
|
-
constructor(
|
|
1197
|
-
this.element = element;
|
|
1218
|
+
constructor() {
|
|
1198
1219
|
effect(() => {
|
|
1199
1220
|
this.disabled = this.disabledInput();
|
|
1200
1221
|
});
|
|
1201
1222
|
}
|
|
1202
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1223
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: DropdownItemComponent, isStandalone: true, selector: "[tedi-dropdown-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "click": "selectItem()", "keydown": "onKeyDown($event)" }, properties: { "class.tedi-dropdown-item": "true", "class.tedi-dropdown-item--active": "this.selected()", "class.tedi-dropdown-item--disabled": "this.disabledInput()", "attr.role": "ariaAttributes().role", "attr.aria-disabled": "ariaAttributes().disabled", "attr.aria-selected": "ariaAttributes().selected", "attr.tabindex": "ariaAttributes().tabIndex" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-dropdown-item{--_background-color: var(--dropdown-item-default-background);--_color: var(--dropdown-item-default-text);--_form-select-item-radius: var(--form-select-item-radius);display:block;width:100%;background-color:var(--_background-color);color:var(--_color);cursor:pointer;text-align:left;border:none;border-radius:0;font-family:var(--family-default);font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-dropdown-item--active,.tedi-dropdown-item--active:hover{--_background-color: var(--dropdown-item-active-background);--_color: var(--dropdown-item-active-text)}.tedi-dropdown-item--disabled,.tedi-dropdown-item--disabled:hover{--_background-color: var(--dropdown-item-disabled-background);--_color: var(--dropdown-item-disabled-text)}.tedi-dropdown-item:hover:not(.tedi-dropdown-item--active,.tedi-dropdown-item--disabled){--_background-color: var(--dropdown-item-hover-background);--_color: var(--dropdown-item-hover-text)}.tedi-dropdown-item:focus-visible{--_background-color: var(--dropdown-item-hover-background);--_color: var(--dropdown-item-hover-text)}.tedi-dropdown-item:first-child{border-top-left-radius:var(--_form-select-item-radius);border-top-right-radius:var(--_form-select-item-radius)}.tedi-dropdown-item:last-child{border-bottom-left-radius:var(--_form-select-item-radius);border-bottom-right-radius:var(--_form-select-item-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1204
1225
|
}
|
|
1205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
1206
1227
|
type: Component,
|
|
1207
1228
|
args: [{ selector: "[tedi-dropdown-item]", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1208
1229
|
"[class.tedi-dropdown-item]": "true",
|
|
@@ -1215,12 +1236,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1215
1236
|
"(click)": "selectItem()",
|
|
1216
1237
|
"(keydown)": "onKeyDown($event)",
|
|
1217
1238
|
}, styles: [".tedi-dropdown-item{--_background-color: var(--dropdown-item-default-background);--_color: var(--dropdown-item-default-text);--_form-select-item-radius: var(--form-select-item-radius);display:block;width:100%;background-color:var(--_background-color);color:var(--_color);cursor:pointer;text-align:left;border:none;border-radius:0;font-family:var(--family-default);font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-dropdown-item--active,.tedi-dropdown-item--active:hover{--_background-color: var(--dropdown-item-active-background);--_color: var(--dropdown-item-active-text)}.tedi-dropdown-item--disabled,.tedi-dropdown-item--disabled:hover{--_background-color: var(--dropdown-item-disabled-background);--_color: var(--dropdown-item-disabled-text)}.tedi-dropdown-item:hover:not(.tedi-dropdown-item--active,.tedi-dropdown-item--disabled){--_background-color: var(--dropdown-item-hover-background);--_color: var(--dropdown-item-hover-text)}.tedi-dropdown-item:focus-visible{--_background-color: var(--dropdown-item-hover-background);--_color: var(--dropdown-item-hover-text)}.tedi-dropdown-item:first-child{border-top-left-radius:var(--_form-select-item-radius);border-top-right-radius:var(--_form-select-item-radius)}.tedi-dropdown-item:last-child{border-bottom-left-radius:var(--_form-select-item-radius);border-bottom-right-radius:var(--_form-select-item-radius)}\n"] }]
|
|
1218
|
-
}], ctorParameters: () => [{ type: i0.
|
|
1239
|
+
}], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
|
|
1219
1240
|
|
|
1220
1241
|
const modalBreakpoints = ["xs", "sm", "md", "lg", "xl"];
|
|
1221
1242
|
class ModalComponent {
|
|
1222
|
-
maxWidth = model("sm");
|
|
1223
|
-
variant = model("default");
|
|
1243
|
+
maxWidth = model("sm", ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
|
|
1244
|
+
variant = model("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1224
1245
|
dialogRef = inject(DialogRef, { optional: true });
|
|
1225
1246
|
dialogData = inject(DIALOG_DATA, {
|
|
1226
1247
|
optional: true,
|
|
@@ -1237,7 +1258,7 @@ class ModalComponent {
|
|
|
1237
1258
|
}
|
|
1238
1259
|
}
|
|
1239
1260
|
return classes.join(" ");
|
|
1240
|
-
});
|
|
1261
|
+
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
1241
1262
|
ngOnInit() {
|
|
1242
1263
|
const data = this.dialogData;
|
|
1243
1264
|
this.dialogRef?.addPanelClass("tedi-modal-panel");
|
|
@@ -1250,19 +1271,19 @@ class ModalComponent {
|
|
|
1250
1271
|
this.variant.set(data.variant);
|
|
1251
1272
|
}
|
|
1252
1273
|
}
|
|
1253
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1274
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: ModalComponent, isStandalone: true, selector: "tedi-modal", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxWidth: "maxWidthChange", variant: "variantChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"tedi-modal__container\">\n <ng-content select=\"tedi-modal-header\" />\n <div class=\"tedi-modal__content\" cdkScrollable>\n <ng-content />\n </div>\n\n <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--tedi-borders-01) solid var(--modal-border-outer);--_modal-padding: var(--tedi-dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--tedi-dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--tedi-dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--tedi-dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--tedi-dimensions-10);--modal-heading-padding-x-tablet: var(--tedi-dimensions-10);--modal-heading-padding-x-mobile: var(--tedi-dimensions-10);--modal-heading-padding-y-desktop: var(--tedi-dimensions-05);--modal-heading-padding-y-tablet: var(--tedi-dimensions-05);--modal-heading-padding-y-mobile: var(--tedi-dimensions-05);--modal-footer-padding-x-desktop: var(--tedi-dimensions-10);--modal-footer-padding-x-tablet: var(--tedi-dimensions-10);--modal-footer-padding-x-mobile: var(--tedi-dimensions-10);--modal-footer-padding-y-desktop: var(--tedi-dimensions-05);--modal-footer-padding-y-tablet: var(--tedi-dimensions-05);--modal-footer-padding-y-mobile: var(--tedi-dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}.tedi-bottom-dialog{bottom:20%}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1255
1276
|
}
|
|
1256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1257
1278
|
type: Component,
|
|
1258
1279
|
args: [{ selector: "tedi-modal", imports: [DialogModule, CdkScrollable], encapsulation: ViewEncapsulation.None, host: {
|
|
1259
1280
|
"[class]": "hostClasses()",
|
|
1260
|
-
}, template: "<div class=\"tedi-modal__container\">\n <ng-content select=\"tedi-modal-header\" />\n <div class=\"tedi-modal__content\" cdkScrollable>\n <ng-content />\n </div>\n\n <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media
|
|
1261
|
-
}] });
|
|
1281
|
+
}, template: "<div class=\"tedi-modal__container\">\n <ng-content select=\"tedi-modal-header\" />\n <div class=\"tedi-modal__content\" cdkScrollable>\n <ng-content />\n </div>\n\n <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--tedi-borders-01) solid var(--modal-border-outer);--_modal-padding: var(--tedi-dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--tedi-dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--tedi-dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--tedi-dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--tedi-dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--tedi-dimensions-10);--modal-heading-padding-x-tablet: var(--tedi-dimensions-10);--modal-heading-padding-x-mobile: var(--tedi-dimensions-10);--modal-heading-padding-y-desktop: var(--tedi-dimensions-05);--modal-heading-padding-y-tablet: var(--tedi-dimensions-05);--modal-heading-padding-y-mobile: var(--tedi-dimensions-05);--modal-footer-padding-x-desktop: var(--tedi-dimensions-10);--modal-footer-padding-x-tablet: var(--tedi-dimensions-10);--modal-footer-padding-x-mobile: var(--tedi-dimensions-10);--modal-footer-padding-y-desktop: var(--tedi-dimensions-05);--modal-footer-padding-y-tablet: var(--tedi-dimensions-05);--modal-footer-padding-y-mobile: var(--tedi-dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}.tedi-bottom-dialog{bottom:20%}\n"] }]
|
|
1282
|
+
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }, { type: i0.Output, args: ["variantChange"] }] } });
|
|
1262
1283
|
|
|
1263
1284
|
class ModalFooterComponent {
|
|
1264
|
-
align = model("flex-end");
|
|
1265
|
-
buttons = model();
|
|
1285
|
+
align = model("flex-end", ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
1286
|
+
buttons = model(...(ngDevMode ? [undefined, { debugName: "buttons" }] : []));
|
|
1266
1287
|
dialogData = inject(DIALOG_DATA, {
|
|
1267
1288
|
optional: true,
|
|
1268
1289
|
});
|
|
@@ -1278,18 +1299,18 @@ class ModalFooterComponent {
|
|
|
1278
1299
|
this.align.set(alignButtons);
|
|
1279
1300
|
}
|
|
1280
1301
|
}
|
|
1281
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1282
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalFooterComponent, isStandalone: true, selector: "tedi-modal-footer", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { align: "alignChange", buttons: "buttonsChange" }, ngImport: i0, template: "<div class=\"tedi-modal-footer\" [style.justify-content]=\"align()\">\n <ng-content>\n @for (button of buttons(); track button.label) {\n <button\n tedi-button\n [size]=\"button.size || 'small'\"\n [variant]=\"button.variant || 'secondary'\"\n [disabled]=\"button.disabled\"\n [ngStyle]=\"button.style\"\n (click)=\"button.action()\"\n >\n @if (button.icon && button.iconPosition == \"start\") {\n <tedi-icon [name]=\"button.icon\" />\n }\n {{ button.label }}\n @if (button.icon && button.iconPosition == \"end\") {\n <tedi-icon [name]=\"button.icon\" />\n }\n </button>\n }\n </ng-content>\n</div>\n", styles: [".tedi-modal-footer{--_modal-footer-gap: .5rem;display:flex;gap:var(--_modal-footer-gap);border-top:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1283
1304
|
}
|
|
1284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
1285
1306
|
type: Component,
|
|
1286
1307
|
args: [{ selector: "tedi-modal-footer", imports: [ButtonComponent, IconComponent, NgStyle], template: "<div class=\"tedi-modal-footer\" [style.justify-content]=\"align()\">\n <ng-content>\n @for (button of buttons(); track button.label) {\n <button\n tedi-button\n [size]=\"button.size || 'small'\"\n [variant]=\"button.variant || 'secondary'\"\n [disabled]=\"button.disabled\"\n [ngStyle]=\"button.style\"\n (click)=\"button.action()\"\n >\n @if (button.icon && button.iconPosition == \"start\") {\n <tedi-icon [name]=\"button.icon\" />\n }\n {{ button.label }}\n @if (button.icon && button.iconPosition == \"end\") {\n <tedi-icon [name]=\"button.icon\" />\n }\n </button>\n }\n </ng-content>\n</div>\n", styles: [".tedi-modal-footer{--_modal-footer-gap: .5rem;display:flex;gap:var(--_modal-footer-gap);border-top:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x)}\n"] }]
|
|
1287
|
-
}] });
|
|
1308
|
+
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }, { type: i0.Output, args: ["alignChange"] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }, { type: i0.Output, args: ["buttonsChange"] }] } });
|
|
1288
1309
|
|
|
1289
1310
|
class ModalHeaderComponent {
|
|
1290
|
-
title = model("Title");
|
|
1291
|
-
feedback = model();
|
|
1292
|
-
closeButton = model(true);
|
|
1311
|
+
title = model("Title", ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1312
|
+
feedback = model(...(ngDevMode ? [undefined, { debugName: "feedback" }] : []));
|
|
1313
|
+
closeButton = model(true, ...(ngDevMode ? [{ debugName: "closeButton" }] : []));
|
|
1293
1314
|
dialogRef = inject(DialogRef, { optional: true });
|
|
1294
1315
|
dialogData = inject(DIALOG_DATA, {
|
|
1295
1316
|
optional: true,
|
|
@@ -1314,13 +1335,13 @@ class ModalHeaderComponent {
|
|
|
1314
1335
|
this.closeButton.set(data.closeButton);
|
|
1315
1336
|
}
|
|
1316
1337
|
}
|
|
1317
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1318
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1338
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", feedback: "feedbackChange", closeButton: "closeButtonChange" }, ngImport: i0, template: "<div class=\"tedi-modal-header\">\n <div class=\"tedi-modal-header__title\">\n <ng-content>\n <h1 tedi-text modifiers=\"h3\">\n {{ title() }}\n </h1>\n </ng-content>\n\n <ng-content select=\"[header-exit-button]\">\n @if (closeButton()) {\n <button\n tedi-closing-button\n variant=\"neutral\"\n (click)=\"closeModal()\"\n ></button>\n }\n </ng-content>\n </div>\n\n @if (feedback()) {\n <tedi-feedback-text\n [text]=\"feedback()!.text\"\n [type]=\"feedback()!.type\"\n [position]=\"feedback()!.position\"\n />\n }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
|
|
1319
1340
|
}
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
1321
1342
|
type: Component,
|
|
1322
1343
|
args: [{ selector: "tedi-modal-header", imports: [FeedbackTextComponent, ClosingButtonComponent, TextComponent], template: "<div class=\"tedi-modal-header\">\n <div class=\"tedi-modal-header__title\">\n <ng-content>\n <h1 tedi-text modifiers=\"h3\">\n {{ title() }}\n </h1>\n </ng-content>\n\n <ng-content select=\"[header-exit-button]\">\n @if (closeButton()) {\n <button\n tedi-closing-button\n variant=\"neutral\"\n (click)=\"closeModal()\"\n ></button>\n }\n </ng-content>\n </div>\n\n @if (feedback()) {\n <tedi-feedback-text\n [text]=\"feedback()!.text\"\n [type]=\"feedback()!.type\"\n [position]=\"feedback()!.position\"\n />\n }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"] }]
|
|
1323
|
-
}] });
|
|
1344
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }, { type: i0.Output, args: ["titleChange"] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }, { type: i0.Output, args: ["feedbackChange"] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }, { type: i0.Output, args: ["closeButtonChange"] }] } });
|
|
1324
1345
|
|
|
1325
1346
|
/**
|
|
1326
1347
|
* @deprecated Use Select from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -1330,53 +1351,53 @@ class SelectComponent {
|
|
|
1330
1351
|
* The id of the select input (for label association).
|
|
1331
1352
|
* @default ""
|
|
1332
1353
|
*/
|
|
1333
|
-
inputId = input.required();
|
|
1354
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
1334
1355
|
/**
|
|
1335
1356
|
* The label for the select input.
|
|
1336
1357
|
* @default ""
|
|
1337
1358
|
*/
|
|
1338
|
-
label = input();
|
|
1359
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1339
1360
|
/**
|
|
1340
1361
|
* Should show label as required?
|
|
1341
1362
|
* @default false
|
|
1342
1363
|
*/
|
|
1343
|
-
required = input(false);
|
|
1364
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1344
1365
|
/**
|
|
1345
1366
|
* The placeholder text to display when no option is selected.
|
|
1346
1367
|
* @default ""
|
|
1347
1368
|
*/
|
|
1348
|
-
placeholder = input("");
|
|
1369
|
+
placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1349
1370
|
/**
|
|
1350
1371
|
* The state of the input.
|
|
1351
1372
|
* @default "default"
|
|
1352
1373
|
*/
|
|
1353
|
-
state = input("default");
|
|
1374
|
+
state = input("default", ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1354
1375
|
/**
|
|
1355
1376
|
* The size of the input.
|
|
1356
1377
|
* @default "default"
|
|
1357
1378
|
*/
|
|
1358
|
-
size = input("default");
|
|
1379
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1359
1380
|
/**
|
|
1360
1381
|
* Whether the clear button will be shown when an option is selected.
|
|
1361
1382
|
* @default false
|
|
1362
1383
|
*/
|
|
1363
|
-
clearable = input(true);
|
|
1384
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
1364
1385
|
/**
|
|
1365
1386
|
* Optional element reference to calculate dropdown width from.
|
|
1366
1387
|
* If provided but null, dropdown will use auto width.
|
|
1367
1388
|
* If not provided, defaults to the host element width.
|
|
1368
1389
|
* @default undefined
|
|
1369
1390
|
*/
|
|
1370
|
-
dropdownWidthRef = input();
|
|
1371
|
-
feedbackText = input();
|
|
1372
|
-
isOpen = signal(false);
|
|
1373
|
-
selectedOptions = signal([]);
|
|
1374
|
-
listboxRef = viewChild(CdkListbox, { read: ElementRef });
|
|
1375
|
-
triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
|
|
1391
|
+
dropdownWidthRef = input(...(ngDevMode ? [undefined, { debugName: "dropdownWidthRef" }] : []));
|
|
1392
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
1393
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
1394
|
+
selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
|
|
1395
|
+
listboxRef = viewChild(CdkListbox, ...(ngDevMode ? [{ debugName: "listboxRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
1396
|
+
triggerRef = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "triggerRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
1376
1397
|
hostRef = inject(ElementRef);
|
|
1377
|
-
options = contentChildren(SelectOptionComponent);
|
|
1378
|
-
dropdownWidth = signal(null);
|
|
1379
|
-
disabled = signal(false);
|
|
1398
|
+
options = contentChildren(SelectOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1399
|
+
dropdownWidth = signal(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
1400
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1380
1401
|
optionGroups = computed(() => {
|
|
1381
1402
|
const groups = [];
|
|
1382
1403
|
this.options().forEach((option) => {
|
|
@@ -1389,7 +1410,7 @@ class SelectComponent {
|
|
|
1389
1410
|
}
|
|
1390
1411
|
});
|
|
1391
1412
|
return groups;
|
|
1392
|
-
});
|
|
1413
|
+
}, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
|
|
1393
1414
|
ngAfterContentChecked() {
|
|
1394
1415
|
this.setDropdownWidth();
|
|
1395
1416
|
}
|
|
@@ -1424,7 +1445,7 @@ class SelectComponent {
|
|
|
1424
1445
|
focusListboxWhenVisible = effect(() => {
|
|
1425
1446
|
if (this.listboxRef())
|
|
1426
1447
|
this.listboxRef()?.nativeElement.focus();
|
|
1427
|
-
});
|
|
1448
|
+
}, ...(ngDevMode ? [{ debugName: "focusListboxWhenVisible" }] : []));
|
|
1428
1449
|
focusTrigger() {
|
|
1429
1450
|
this.triggerRef()?.nativeElement.focus();
|
|
1430
1451
|
}
|
|
@@ -1435,7 +1456,7 @@ class SelectComponent {
|
|
|
1435
1456
|
return this.options()
|
|
1436
1457
|
.filter((option) => this.isOptionSelected(option.value()))
|
|
1437
1458
|
.map((option) => option.label());
|
|
1438
|
-
});
|
|
1459
|
+
}, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
|
|
1439
1460
|
setDropdownWidth() {
|
|
1440
1461
|
const widthRef = this.dropdownWidthRef();
|
|
1441
1462
|
if (widthRef === null) {
|
|
@@ -1461,16 +1482,16 @@ class SelectComponent {
|
|
|
1461
1482
|
setDisabledState(isDisabled) {
|
|
1462
1483
|
this.disabled.set(isDisabled);
|
|
1463
1484
|
}
|
|
1464
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1485
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select" }, providers: [
|
|
1466
1487
|
{
|
|
1467
1488
|
provide: NG_VALUE_ACCESSOR,
|
|
1468
1489
|
useExisting: forwardRef(() => SelectComponent),
|
|
1469
1490
|
multi: true,
|
|
1470
1491
|
},
|
|
1471
|
-
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1492
|
+
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1472
1493
|
}
|
|
1473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1474
1495
|
type: Component,
|
|
1475
1496
|
args: [{ selector: "tedi-select", imports: [
|
|
1476
1497
|
CommonModule,
|
|
@@ -1495,7 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1495
1516
|
multi: true,
|
|
1496
1517
|
},
|
|
1497
1518
|
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
|
|
1498
|
-
}], propDecorators: { onWindowResize: [{
|
|
1519
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
|
|
1499
1520
|
type: HostListener,
|
|
1500
1521
|
args: ["window:resize"]
|
|
1501
1522
|
}] } });
|
|
@@ -1509,19 +1530,19 @@ class TagComponent {
|
|
|
1509
1530
|
* When true, a spinner will be displayed inside the tag.
|
|
1510
1531
|
* @default false
|
|
1511
1532
|
*/
|
|
1512
|
-
loading = input(false);
|
|
1533
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1513
1534
|
/**
|
|
1514
1535
|
* Whether the tag can be closed.
|
|
1515
1536
|
* When true, a close button will be displayed that emits the 'closed' event when clicked.
|
|
1516
1537
|
* @default false
|
|
1517
1538
|
*/
|
|
1518
|
-
closable = input(false);
|
|
1539
|
+
closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
1519
1540
|
/**
|
|
1520
1541
|
* The visual style of the tag.
|
|
1521
1542
|
* Possible values: 'primary', 'secondary', 'danger'
|
|
1522
1543
|
* @default "primary"
|
|
1523
1544
|
*/
|
|
1524
|
-
type = input("primary");
|
|
1545
|
+
type = input("primary", ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1525
1546
|
/**
|
|
1526
1547
|
* Event emitted when the close button is clicked.
|
|
1527
1548
|
* Only relevant when closable is true.
|
|
@@ -1533,14 +1554,14 @@ class TagComponent {
|
|
|
1533
1554
|
classList.push(`tedi-tag--${this.type()}`);
|
|
1534
1555
|
}
|
|
1535
1556
|
return classList.join(" ");
|
|
1536
|
-
});
|
|
1557
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
1537
1558
|
handleClose(event) {
|
|
1538
1559
|
this.closed.emit(event);
|
|
1539
1560
|
}
|
|
1540
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1541
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\">\n <ng-content />\n</span>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"10\" />\n </span>\n} @else if (closable()) {\n <!-- TODO: Not sure about the aria-label and title here. Should they come from input and be translatable? -->\n <button\n type=\"button\"\n class=\"tedi-tag__closing-button\"\n [attr.aria-label]=\"'remove' | tediTranslate\"\n [title]=\"'remove' | tediTranslate\"\n (click)=\"handleClose($event)\"\n >\n <tedi-icon name=\"close\" [size]=\"18\" />\n </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_border-width: 1px;--_tag-padding-y: calc(var(--tag-default-padding-y) - var(--_border-width));--_padding-y: var(--tag-default-padding-y);--_padding-x: var(--tag-default-padding-x);--_border-radius: var(--tag-default-radius);--_gap-x: var(--tag-default-padding-x);--_line-height: var(--body-small-regular-line-height);display:inline-flex;align-items:flex-start;gap:var(--_gap-x);padding:0 var(--_padding-x);background-color:var(--_background-color);border:var(--_border-width) solid;border-color:var(--_border-color);border-radius:var(--_border-radius);font-family:var(--family-default);color:var(--general-text-primary);line-height:var(--_line-height);overflow:hidden;font-weight:var(--body-small-regular-weight);font-size:var(--body-small-regular-size);--_tag-padding-y: var(--tag-default-padding-y)}.tedi-tag__content{padding:calc(var(--_tag-padding-y) - var(--_border-width)) 0}.tedi-tag__icon-wrapper{line-height:calc(var(--_line-height) + var(--_tag-padding-y))}.tedi-tag__closing-button{--_button-height: var(--button-xs-icon-size);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;border:none;background-color:#00000003;transition:background-color .3s ease-in-out;height:calc(var(--_button-height) - var(--_border-width) * 2);min-width:var(--button-xs-icon-size)}.tedi-tag__closing-button:hover,.tedi-tag__closing-button:focus{background-color:#0000001a}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--_tag-padding-y))}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1542
1563
|
}
|
|
1543
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, decorators: [{
|
|
1544
1565
|
type: Component,
|
|
1545
1566
|
args: [{ selector: "tedi-tag", imports: [SpinnerComponent, IconComponent, TediTranslationPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1546
1567
|
"[class.tedi-tag]": "true",
|
|
@@ -1548,7 +1569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1548
1569
|
"[class.tedi-tag--closable]": "closable()",
|
|
1549
1570
|
"[class]": "classes()",
|
|
1550
1571
|
}, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\">\n <ng-content />\n</span>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"10\" />\n </span>\n} @else if (closable()) {\n <!-- TODO: Not sure about the aria-label and title here. Should they come from input and be translatable? -->\n <button\n type=\"button\"\n class=\"tedi-tag__closing-button\"\n [attr.aria-label]=\"'remove' | tediTranslate\"\n [title]=\"'remove' | tediTranslate\"\n (click)=\"handleClose($event)\"\n >\n <tedi-icon name=\"close\" [size]=\"18\" />\n </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_border-width: 1px;--_tag-padding-y: calc(var(--tag-default-padding-y) - var(--_border-width));--_padding-y: var(--tag-default-padding-y);--_padding-x: var(--tag-default-padding-x);--_border-radius: var(--tag-default-radius);--_gap-x: var(--tag-default-padding-x);--_line-height: var(--body-small-regular-line-height);display:inline-flex;align-items:flex-start;gap:var(--_gap-x);padding:0 var(--_padding-x);background-color:var(--_background-color);border:var(--_border-width) solid;border-color:var(--_border-color);border-radius:var(--_border-radius);font-family:var(--family-default);color:var(--general-text-primary);line-height:var(--_line-height);overflow:hidden;font-weight:var(--body-small-regular-weight);font-size:var(--body-small-regular-size);--_tag-padding-y: var(--tag-default-padding-y)}.tedi-tag__content{padding:calc(var(--_tag-padding-y) - var(--_border-width)) 0}.tedi-tag__icon-wrapper{line-height:calc(var(--_line-height) + var(--_tag-padding-y))}.tedi-tag__closing-button{--_button-height: var(--button-xs-icon-size);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;border:none;background-color:#00000003;transition:background-color .3s ease-in-out;height:calc(var(--_button-height) - var(--_border-width) * 2);min-width:var(--button-xs-icon-size)}.tedi-tag__closing-button:hover,.tedi-tag__closing-button:focus{background-color:#0000001a}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--_tag-padding-y))}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
|
|
1551
|
-
}] });
|
|
1572
|
+
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1552
1573
|
|
|
1553
1574
|
/**
|
|
1554
1575
|
* @deprecated Use StatusBadge from TEDI-ready instead. This component will be removed from future versions.
|
|
@@ -1557,43 +1578,43 @@ class StatusBadgeComponent {
|
|
|
1557
1578
|
/**
|
|
1558
1579
|
* Additional classes to apply custom styles to the StatusBadge.
|
|
1559
1580
|
*/
|
|
1560
|
-
className = input();
|
|
1581
|
+
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
1561
1582
|
/**
|
|
1562
1583
|
* Provides the full text or description when the Badge represents an abbreviation.
|
|
1563
1584
|
* This is typically shown as a tooltip on hover.
|
|
1564
1585
|
*/
|
|
1565
|
-
title = input();
|
|
1586
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
1566
1587
|
/**
|
|
1567
1588
|
* ID attribute
|
|
1568
1589
|
*/
|
|
1569
|
-
id = input();
|
|
1590
|
+
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
1570
1591
|
/**
|
|
1571
1592
|
* ARIA role attribute for accessibility.
|
|
1572
1593
|
*/
|
|
1573
|
-
role = input();
|
|
1594
|
+
role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
|
|
1574
1595
|
/**
|
|
1575
1596
|
* Specifies the color scheme of the StatusBadge.
|
|
1576
1597
|
* @default default
|
|
1577
1598
|
*/
|
|
1578
|
-
color = input("neutral");
|
|
1599
|
+
color = input("neutral", ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1579
1600
|
/**
|
|
1580
1601
|
* Determines the style or visual type of the StatusBadge.
|
|
1581
1602
|
* @default filled
|
|
1582
1603
|
*/
|
|
1583
|
-
variant = input("filled");
|
|
1604
|
+
variant = input("filled", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1584
1605
|
/**
|
|
1585
1606
|
* Specifies the size of the StatusBadge.
|
|
1586
1607
|
* @default default
|
|
1587
1608
|
*/
|
|
1588
|
-
size = input("default");
|
|
1609
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1589
1610
|
/**
|
|
1590
1611
|
* StatusBadge status indicator
|
|
1591
1612
|
*/
|
|
1592
|
-
status = input("inactive");
|
|
1613
|
+
status = input("inactive", ...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
1593
1614
|
/**
|
|
1594
1615
|
* The name of the icon to be displayed inside the StatusBadge. The icon is rendered using the `Icon` component.
|
|
1595
1616
|
*/
|
|
1596
|
-
icon = input("");
|
|
1617
|
+
icon = input("", ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1597
1618
|
classes = computed(() => {
|
|
1598
1619
|
const classList = ["tedi-status-badge"];
|
|
1599
1620
|
if (this.color()) {
|
|
@@ -1615,7 +1636,7 @@ class StatusBadgeComponent {
|
|
|
1615
1636
|
classList.push(this.className());
|
|
1616
1637
|
}
|
|
1617
1638
|
return classList.join(" ");
|
|
1618
|
-
});
|
|
1639
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
1619
1640
|
ariaLive = computed(() => {
|
|
1620
1641
|
switch (this.role()) {
|
|
1621
1642
|
case "alert":
|
|
@@ -1625,7 +1646,7 @@ class StatusBadgeComponent {
|
|
|
1625
1646
|
default:
|
|
1626
1647
|
return undefined;
|
|
1627
1648
|
}
|
|
1628
|
-
});
|
|
1649
|
+
}, ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
|
|
1629
1650
|
mapBadgeColorToIconColor = computed(() => {
|
|
1630
1651
|
switch (this.color()) {
|
|
1631
1652
|
case "brand":
|
|
@@ -1641,11 +1662,11 @@ class StatusBadgeComponent {
|
|
|
1641
1662
|
default:
|
|
1642
1663
|
return "primary";
|
|
1643
1664
|
}
|
|
1644
|
-
});
|
|
1645
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusBadgeComponent, isStandalone: true, selector: "[tedi-status-badge]", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.title": "title()", "attr.id": "id()", "attr.role": "role()", "attr.aria-live": "ariaLive()", "attr.aria-label": "title()" } }, ngImport: i0, template: "@if (icon()) {\n <tedi-icon [name]=\"icon()\" [color]=\"mapBadgeColorToIconColor()\" [size]=\"16\" />\n}\n<span class=\"tedi-status-badge__inner-text\">\n <ng-content></ng-content>\n</span>\n", styles: [".tedi-status-badge__inner-text:empty{display:none}.tedi-status-badge{--status-badge-icon-primary: var(--tedi-blue-700);--status-badge-icon-secondary: var(--tedi-orange-700);position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--_status-badge-text);background:var(--_status-badge-background);box-shadow:var(--_status-badge-box-shadow);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);padding:var(--tag-default-padding-y) var(--tag-default-padding-x);border-radius:var(--tag-default-radius)}.tedi-status-badge__inner-text{min-width:fit-content;padding-left:var(--tag-default-padding-x);padding-right:var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.25rem;right:-.25rem;z-index:1;width:.625rem;height:.625rem;content:\"\";border:1px solid var(--tedi-neutral-100);border-radius:50%;background-color:var(--_status-badge--indicator-background)}.tedi-status-badge--status.tedi-badge--large:before{top:-.1875rem;right:-.1875rem;width:.875rem;height:.875rem}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;min-height:24px;line-height:var(--body-small-regular-line-height)}.tedi-status-badge__icon-primary{color:var(--status-badge-icon-primary)}.tedi-status-badge__icon-accent{color:var(--status-badge-icon-secondary)}@media print{.tedi-status-badge{filter:grayscale(1)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1665
|
+
}, ...(ngDevMode ? [{ debugName: "mapBadgeColorToIconColor" }] : []));
|
|
1666
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: StatusBadgeComponent, isStandalone: true, selector: "[tedi-status-badge]", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.title": "title()", "attr.id": "id()", "attr.role": "role()", "attr.aria-live": "ariaLive()", "attr.aria-label": "title()" } }, ngImport: i0, template: "@if (icon()) {\n <tedi-icon [name]=\"icon()\" [color]=\"mapBadgeColorToIconColor()\" [size]=\"16\" />\n}\n<span class=\"tedi-status-badge__inner-text\">\n <ng-content></ng-content>\n</span>\n", styles: [".tedi-status-badge__inner-text:empty{display:none}.tedi-status-badge{--status-badge-icon-primary: var(--tedi-blue-700);--status-badge-icon-secondary: var(--tedi-orange-700);position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--_status-badge-text);background:var(--_status-badge-background);box-shadow:var(--_status-badge-box-shadow);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);padding:var(--tag-default-padding-y) var(--tag-default-padding-x);border-radius:var(--tag-default-radius)}.tedi-status-badge__inner-text{min-width:fit-content;padding-left:var(--tag-default-padding-x);padding-right:var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.25rem;right:-.25rem;z-index:1;width:.625rem;height:.625rem;content:\"\";border:1px solid var(--tedi-neutral-100);border-radius:50%;background-color:var(--_status-badge--indicator-background)}.tedi-status-badge--status.tedi-badge--large:before{top:-.1875rem;right:-.1875rem;width:.875rem;height:.875rem}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;min-height:24px;line-height:var(--body-small-regular-line-height)}.tedi-status-badge__icon-primary{color:var(--status-badge-icon-primary)}.tedi-status-badge__icon-accent{color:var(--status-badge-icon-secondary)}@media print{.tedi-status-badge{filter:grayscale(1)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1647
1668
|
}
|
|
1648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
1649
1670
|
type: Component,
|
|
1650
1671
|
args: [{ selector: "[tedi-status-badge]", imports: [IconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
1651
1672
|
"[class]": "classes()",
|
|
@@ -1655,7 +1676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1655
1676
|
"[attr.aria-live]": "ariaLive()",
|
|
1656
1677
|
"[attr.aria-label]": "title()",
|
|
1657
1678
|
}, template: "@if (icon()) {\n <tedi-icon [name]=\"icon()\" [color]=\"mapBadgeColorToIconColor()\" [size]=\"16\" />\n}\n<span class=\"tedi-status-badge__inner-text\">\n <ng-content></ng-content>\n</span>\n", styles: [".tedi-status-badge__inner-text:empty{display:none}.tedi-status-badge{--status-badge-icon-primary: var(--tedi-blue-700);--status-badge-icon-secondary: var(--tedi-orange-700);position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--_status-badge-text);background:var(--_status-badge-background);box-shadow:var(--_status-badge-box-shadow);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);padding:var(--tag-default-padding-y) var(--tag-default-padding-x);border-radius:var(--tag-default-radius)}.tedi-status-badge__inner-text{min-width:fit-content;padding-left:var(--tag-default-padding-x);padding-right:var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.25rem;right:-.25rem;z-index:1;width:.625rem;height:.625rem;content:\"\";border:1px solid var(--tedi-neutral-100);border-radius:50%;background-color:var(--_status-badge--indicator-background)}.tedi-status-badge--status.tedi-badge--large:before{top:-.1875rem;right:-.1875rem;width:.875rem;height:.875rem}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;min-height:24px;line-height:var(--body-small-regular-line-height)}.tedi-status-badge__icon-primary{color:var(--status-badge-icon-primary)}.tedi-status-badge__icon-accent{color:var(--status-badge-icon-secondary)}@media print{.tedi-status-badge{filter:grayscale(1)}}\n"] }]
|
|
1658
|
-
}] });
|
|
1679
|
+
}], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
1659
1680
|
|
|
1660
1681
|
var specialOptionControls;
|
|
1661
1682
|
(function (specialOptionControls) {
|
|
@@ -1667,74 +1688,74 @@ class MultiselectComponent {
|
|
|
1667
1688
|
* The id of the select input (for label association).
|
|
1668
1689
|
* @default ""
|
|
1669
1690
|
*/
|
|
1670
|
-
inputId = input.required();
|
|
1691
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
1671
1692
|
/**
|
|
1672
1693
|
* The label for the select input.
|
|
1673
1694
|
* @default ""
|
|
1674
1695
|
*/
|
|
1675
|
-
label = input();
|
|
1696
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1676
1697
|
/**
|
|
1677
1698
|
* Should show label as required?
|
|
1678
1699
|
* @default false
|
|
1679
1700
|
*/
|
|
1680
|
-
required = input(false);
|
|
1701
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1681
1702
|
/**
|
|
1682
1703
|
* The placeholder text to display when no option is selected.
|
|
1683
1704
|
* @default ""
|
|
1684
1705
|
*/
|
|
1685
|
-
placeholder = input("");
|
|
1706
|
+
placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1686
1707
|
/**
|
|
1687
1708
|
* The state of the input.
|
|
1688
1709
|
* @default "default"
|
|
1689
1710
|
*/
|
|
1690
|
-
state = input("default");
|
|
1711
|
+
state = input("default", ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1691
1712
|
/**
|
|
1692
1713
|
* The size of the input.
|
|
1693
1714
|
* @default "default"
|
|
1694
1715
|
*/
|
|
1695
|
-
size = input("default");
|
|
1716
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1696
1717
|
/**
|
|
1697
1718
|
* Whether the select should be rendered as a multi-row dropdown.
|
|
1698
1719
|
* @default false
|
|
1699
1720
|
*/
|
|
1700
|
-
multiRow = input(false);
|
|
1721
|
+
multiRow = input(false, ...(ngDevMode ? [{ debugName: "multiRow" }] : []));
|
|
1701
1722
|
/**
|
|
1702
1723
|
* Whether the selected labels show removing buttons.
|
|
1703
1724
|
* @default false
|
|
1704
1725
|
*/
|
|
1705
|
-
clearableTags = input(false);
|
|
1726
|
+
clearableTags = input(false, ...(ngDevMode ? [{ debugName: "clearableTags" }] : []));
|
|
1706
1727
|
/**
|
|
1707
1728
|
* Whether the select should allow selecting all options at once.
|
|
1708
1729
|
* @default false
|
|
1709
1730
|
*/
|
|
1710
|
-
selectAll = input(false);
|
|
1731
|
+
selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll" }] : []));
|
|
1711
1732
|
/**
|
|
1712
1733
|
* Whether the select should allow selecting groups of options.
|
|
1713
1734
|
* @default false
|
|
1714
1735
|
*/
|
|
1715
|
-
selectableGroups = input(false);
|
|
1736
|
+
selectableGroups = input(false, ...(ngDevMode ? [{ debugName: "selectableGroups" }] : []));
|
|
1716
1737
|
/**
|
|
1717
1738
|
* Whether the clear button will be shown when an option is selected.
|
|
1718
1739
|
* @default true
|
|
1719
1740
|
*/
|
|
1720
|
-
clearable = input(true);
|
|
1741
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
1721
1742
|
/**
|
|
1722
1743
|
* Optional element reference to calculate dropdown width from.
|
|
1723
1744
|
* If provided but null, dropdown will use auto width.
|
|
1724
1745
|
* If not provided, defaults to the host element width.
|
|
1725
1746
|
* @default undefined
|
|
1726
1747
|
*/
|
|
1727
|
-
dropdownWidthRef = input();
|
|
1728
|
-
feedbackText = input();
|
|
1748
|
+
dropdownWidthRef = input(...(ngDevMode ? [undefined, { debugName: "dropdownWidthRef" }] : []));
|
|
1749
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
1729
1750
|
specialOptionControls = specialOptionControls;
|
|
1730
|
-
isOpen = signal(false);
|
|
1731
|
-
selectedOptions = signal([]);
|
|
1732
|
-
listboxRef = viewChild(CdkListbox, { read: ElementRef });
|
|
1733
|
-
triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
|
|
1751
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
1752
|
+
selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
|
|
1753
|
+
listboxRef = viewChild(CdkListbox, ...(ngDevMode ? [{ debugName: "listboxRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
1754
|
+
triggerRef = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "triggerRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
1734
1755
|
hostRef = inject(ElementRef);
|
|
1735
|
-
options = contentChildren(SelectOptionComponent);
|
|
1736
|
-
dropdownWidth = signal(0);
|
|
1737
|
-
disabled = signal(false);
|
|
1756
|
+
options = contentChildren(SelectOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1757
|
+
dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
1758
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1738
1759
|
optionGroups = computed(() => {
|
|
1739
1760
|
const groups = [];
|
|
1740
1761
|
this.options().forEach((option) => {
|
|
@@ -1747,7 +1768,7 @@ class MultiselectComponent {
|
|
|
1747
1768
|
}
|
|
1748
1769
|
});
|
|
1749
1770
|
return groups;
|
|
1750
|
-
});
|
|
1771
|
+
}, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
|
|
1751
1772
|
onWindowResize() {
|
|
1752
1773
|
this.setDropdownWidth();
|
|
1753
1774
|
}
|
|
@@ -1792,7 +1813,7 @@ class MultiselectComponent {
|
|
|
1792
1813
|
focusListboxWhenVisible = effect(() => {
|
|
1793
1814
|
if (this.listboxRef())
|
|
1794
1815
|
this.listboxRef()?.nativeElement.focus();
|
|
1795
|
-
});
|
|
1816
|
+
}, ...(ngDevMode ? [{ debugName: "focusListboxWhenVisible" }] : []));
|
|
1796
1817
|
focusTrigger() {
|
|
1797
1818
|
this.triggerRef()?.nativeElement.focus();
|
|
1798
1819
|
}
|
|
@@ -1813,10 +1834,10 @@ class MultiselectComponent {
|
|
|
1813
1834
|
return this.options()
|
|
1814
1835
|
.filter((option) => !option.disabled())
|
|
1815
1836
|
.map((option) => option.value());
|
|
1816
|
-
});
|
|
1837
|
+
}, ...(ngDevMode ? [{ debugName: "allOptions" }] : []));
|
|
1817
1838
|
allOptionsSelected = computed(() => {
|
|
1818
1839
|
return this.selectedOptions().length === this.allOptions().length;
|
|
1819
|
-
});
|
|
1840
|
+
}, ...(ngDevMode ? [{ debugName: "allOptionsSelected" }] : []));
|
|
1820
1841
|
toggleSelectAll() {
|
|
1821
1842
|
const newSelection = this.allOptionsSelected() ? [] : this.allOptions();
|
|
1822
1843
|
this.selectedOptions.set(newSelection);
|
|
@@ -1884,16 +1905,16 @@ class MultiselectComponent {
|
|
|
1884
1905
|
ngAfterContentChecked() {
|
|
1885
1906
|
this.setDropdownWidth();
|
|
1886
1907
|
}
|
|
1887
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1888
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1908
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiselectComponent, isStandalone: true, selector: "tedi-multiselect", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, clearableTags: { classPropertyName: "clearableTags", publicName: "clearableTags", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select tedi-select--multiselect" }, providers: [
|
|
1889
1910
|
{
|
|
1890
1911
|
provide: NG_VALUE_ACCESSOR,
|
|
1891
1912
|
useExisting: forwardRef(() => MultiselectComponent),
|
|
1892
1913
|
multi: true,
|
|
1893
1914
|
},
|
|
1894
|
-
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1915
|
+
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1895
1916
|
}
|
|
1896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
1897
1918
|
type: Component,
|
|
1898
1919
|
args: [{ selector: "tedi-multiselect", imports: [
|
|
1899
1920
|
CommonModule,
|
|
@@ -1920,7 +1941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1920
1941
|
multi: true,
|
|
1921
1942
|
},
|
|
1922
1943
|
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
|
|
1923
|
-
}], propDecorators: { onWindowResize: [{
|
|
1944
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], clearableTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableTags", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
|
|
1924
1945
|
type: HostListener,
|
|
1925
1946
|
args: ["window:resize"]
|
|
1926
1947
|
}] } });
|
|
@@ -1930,105 +1951,105 @@ class TextareaComponent extends InputComponent {
|
|
|
1930
1951
|
* Whether the textarea should be resizable in the X direction.
|
|
1931
1952
|
* @default false
|
|
1932
1953
|
*/
|
|
1933
|
-
resizeX = input(false);
|
|
1954
|
+
resizeX = input(false, ...(ngDevMode ? [{ debugName: "resizeX" }] : []));
|
|
1934
1955
|
/**
|
|
1935
1956
|
* Whether the textarea should be resizable in the Y direction.
|
|
1936
1957
|
* @default true
|
|
1937
1958
|
*/
|
|
1938
|
-
resizeY = input(true);
|
|
1939
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1959
|
+
resizeY = input(true, ...(ngDevMode ? [{ debugName: "resizeY" }] : []));
|
|
1960
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "[tedi-textarea]", inputs: { resizeX: { classPropertyName: "resizeX", publicName: "resizeX", isSignal: true, isRequired: false, transformFunction: null }, resizeY: { classPropertyName: "resizeY", publicName: "resizeY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-textarea": "true", "class.tedi-textarea--resizeX": "this.resizeX()", "class.tedi-textarea--resizeY": "this.resizeY()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_form-field-outer-gap: var(--form-field-outer-spacing);padding:var(--_padding-y) var(--_padding-x);border-radius:var(--_border-radius);font-size:var(--_font-size);line-height:var(--_line-height);border:1px solid;border-color:var(--_border-color);color:var(--_color);background-color:var(--_background-color);margin-bottom:var(--_form-field-outer-gap);font-family:var(--family-default)}.tedi-input:focus,.tedi-input:active{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:disabled,.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input::placeholder{color:var(--_placeholder-color)}.tedi-input--error:not(:disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(:disabled):focus,.tedi-input--error:not(:disabled):active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(:disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(:disabled):focus,.tedi-input--valid:not(:disabled):active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm)}\n", ".tedi-textarea{width:100%;resize:none;min-height:var(--form-textarea-min-height);padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default)}.tedi-textarea--resizeX{resize:horizontal}.tedi-textarea--resizeY{resize:vertical}.tedi-textarea--resizeY.tedi-textarea--resizeX{resize:both}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1941
1962
|
}
|
|
1942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
1943
1964
|
type: Component,
|
|
1944
1965
|
args: [{ selector: "[tedi-textarea]", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1945
1966
|
"[class.tedi-textarea]": "true",
|
|
1946
1967
|
"[class.tedi-textarea--resizeX]": "this.resizeX()",
|
|
1947
1968
|
"[class.tedi-textarea--resizeY]": "this.resizeY()",
|
|
1948
1969
|
}, styles: [".tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_form-field-outer-gap: var(--form-field-outer-spacing);padding:var(--_padding-y) var(--_padding-x);border-radius:var(--_border-radius);font-size:var(--_font-size);line-height:var(--_line-height);border:1px solid;border-color:var(--_border-color);color:var(--_color);background-color:var(--_background-color);margin-bottom:var(--_form-field-outer-gap);font-family:var(--family-default)}.tedi-input:focus,.tedi-input:active{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:disabled,.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input::placeholder{color:var(--_placeholder-color)}.tedi-input--error:not(:disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(:disabled):focus,.tedi-input--error:not(:disabled):active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(:disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(:disabled):focus,.tedi-input--valid:not(:disabled):active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm)}\n", ".tedi-textarea{width:100%;resize:none;min-height:var(--form-textarea-min-height);padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default)}.tedi-textarea--resizeX{resize:horizontal}.tedi-textarea--resizeY{resize:vertical}.tedi-textarea--resizeY.tedi-textarea--resizeX{resize:both}\n"] }]
|
|
1949
|
-
}] });
|
|
1970
|
+
}], propDecorators: { resizeX: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeX", required: false }] }], resizeY: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeY", required: false }] }] } });
|
|
1950
1971
|
|
|
1951
1972
|
class SearchComponent {
|
|
1952
1973
|
/**
|
|
1953
1974
|
* Search input ID for accessibility
|
|
1954
1975
|
*/
|
|
1955
|
-
inputId = input.required();
|
|
1976
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
1956
1977
|
/**
|
|
1957
1978
|
* Autocomplete options for the search input
|
|
1958
1979
|
* @default []
|
|
1959
1980
|
*/
|
|
1960
|
-
autocompleteOptions = input([]);
|
|
1981
|
+
autocompleteOptions = input([], ...(ngDevMode ? [{ debugName: "autocompleteOptions" }] : []));
|
|
1961
1982
|
/**
|
|
1962
1983
|
* Minimum number of characters to trigger autocomplete
|
|
1963
1984
|
* @default 3
|
|
1964
1985
|
*/
|
|
1965
|
-
autocompleteFrom = input();
|
|
1986
|
+
autocompleteFrom = input(...(ngDevMode ? [undefined, { debugName: "autocompleteFrom" }] : []));
|
|
1966
1987
|
/**
|
|
1967
1988
|
* Size of the search component
|
|
1968
1989
|
* @default "default"
|
|
1969
1990
|
*/
|
|
1970
|
-
size = input("default");
|
|
1991
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1971
1992
|
/**
|
|
1972
1993
|
* Input state for validation
|
|
1973
1994
|
* @default "default"
|
|
1974
1995
|
*/
|
|
1975
|
-
state = input("default");
|
|
1996
|
+
state = input("default", ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1976
1997
|
/**
|
|
1977
1998
|
* Should the search button be shown
|
|
1978
1999
|
* @default false
|
|
1979
2000
|
*/
|
|
1980
|
-
withButton = input(false);
|
|
2001
|
+
withButton = input(false, ...(ngDevMode ? [{ debugName: "withButton" }] : []));
|
|
1981
2002
|
/**
|
|
1982
2003
|
* Add text to the search button
|
|
1983
2004
|
* @default undefined
|
|
1984
2005
|
*/
|
|
1985
|
-
buttonText = input(undefined);
|
|
2006
|
+
buttonText = input(undefined, ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
1986
2007
|
/**
|
|
1987
2008
|
* Should the search input be clearable
|
|
1988
2009
|
* @default true
|
|
1989
2010
|
*/
|
|
1990
|
-
clearable = input(true);
|
|
2011
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
1991
2012
|
/**
|
|
1992
2013
|
* Text to show when no results are found
|
|
1993
2014
|
* @default "Vasteid ei leitud"
|
|
1994
2015
|
*/
|
|
1995
|
-
noResultText = input("Vasteid ei leitud");
|
|
2016
|
+
noResultText = input("Vasteid ei leitud", ...(ngDevMode ? [{ debugName: "noResultText" }] : []));
|
|
1996
2017
|
/**
|
|
1997
2018
|
* Should the searc input be disabled
|
|
1998
2019
|
* @default false
|
|
1999
2020
|
*/
|
|
2000
|
-
disabled = input(false);
|
|
2021
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2001
2022
|
/**
|
|
2002
2023
|
* Placeholder text for the search input
|
|
2003
2024
|
* @default ""
|
|
2004
2025
|
*/
|
|
2005
|
-
placeholder = input("");
|
|
2026
|
+
placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
2006
2027
|
/**
|
|
2007
2028
|
* Should the search input show a loading spinner
|
|
2008
2029
|
* @default false
|
|
2009
2030
|
*/
|
|
2010
|
-
loading = input(false);
|
|
2031
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
2011
2032
|
/**
|
|
2012
2033
|
* Label for the search input
|
|
2013
2034
|
* @default undefined
|
|
2014
2035
|
*/
|
|
2015
|
-
label = input();
|
|
2036
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2016
2037
|
/**
|
|
2017
2038
|
* Feedback text component for displaying messages
|
|
2018
2039
|
* @default undefined
|
|
2019
2040
|
*/
|
|
2020
|
-
feedbackText = input();
|
|
2041
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
2021
2042
|
// Emitted events
|
|
2022
2043
|
searchEvent = output();
|
|
2023
2044
|
clearEvent = output();
|
|
2024
|
-
_inputValue = model();
|
|
2025
|
-
_selectedOption = model();
|
|
2026
|
-
_width = signal(0);
|
|
2045
|
+
_inputValue = model(...(ngDevMode ? [undefined, { debugName: "_inputValue" }] : []));
|
|
2046
|
+
_selectedOption = model(...(ngDevMode ? [undefined, { debugName: "_selectedOption" }] : []));
|
|
2047
|
+
_width = signal(0, ...(ngDevMode ? [{ debugName: "_width" }] : []));
|
|
2027
2048
|
_elementRef = inject(ElementRef);
|
|
2028
|
-
_disabled = signal(false);
|
|
2029
|
-
_isVisible = signal(false);
|
|
2030
|
-
_cdkMenuRef = viewChild(CdkMenu, { read: ElementRef });
|
|
2031
|
-
_overlayOriginRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
|
|
2049
|
+
_disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
2050
|
+
_isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
|
|
2051
|
+
_cdkMenuRef = viewChild(CdkMenu, ...(ngDevMode ? [{ debugName: "_cdkMenuRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
2052
|
+
_overlayOriginRef = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "_overlayOriginRef", read: ElementRef }] : [{ read: ElementRef }]));
|
|
2032
2053
|
modifierClasses = computed(() => {
|
|
2033
2054
|
const modifiers = [];
|
|
2034
2055
|
if (this.size())
|
|
@@ -2036,7 +2057,7 @@ class SearchComponent {
|
|
|
2036
2057
|
if (this.state())
|
|
2037
2058
|
modifiers.push(`tedi-search--${this.state()}`);
|
|
2038
2059
|
return modifiers.join(" ");
|
|
2039
|
-
});
|
|
2060
|
+
}, ...(ngDevMode ? [{ debugName: "modifierClasses" }] : []));
|
|
2040
2061
|
ngAfterContentChecked() {
|
|
2041
2062
|
this._width.set(this.getWidth());
|
|
2042
2063
|
}
|
|
@@ -2075,7 +2096,7 @@ class SearchComponent {
|
|
|
2075
2096
|
return searchString.every((searchTerm) => option.label.toLowerCase().includes(searchTerm) ||
|
|
2076
2097
|
option.description?.toLowerCase().includes(searchTerm));
|
|
2077
2098
|
});
|
|
2078
|
-
});
|
|
2099
|
+
}, ...(ngDevMode ? [{ debugName: "_foundOptions" }] : []));
|
|
2079
2100
|
iconSize = computed(() => {
|
|
2080
2101
|
const size = this.size();
|
|
2081
2102
|
const hasButton = this.withButton();
|
|
@@ -2093,7 +2114,7 @@ class SearchComponent {
|
|
|
2093
2114
|
else {
|
|
2094
2115
|
return 18;
|
|
2095
2116
|
}
|
|
2096
|
-
});
|
|
2117
|
+
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
2097
2118
|
buttonSize = computed(() => {
|
|
2098
2119
|
switch (this.size()) {
|
|
2099
2120
|
case "large":
|
|
@@ -2103,7 +2124,7 @@ class SearchComponent {
|
|
|
2103
2124
|
default:
|
|
2104
2125
|
return "default";
|
|
2105
2126
|
}
|
|
2106
|
-
});
|
|
2127
|
+
}, ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
|
|
2107
2128
|
// ControlValueAccessor methods
|
|
2108
2129
|
onChange = () => { };
|
|
2109
2130
|
onTouched = () => { };
|
|
@@ -2170,16 +2191,16 @@ class SearchComponent {
|
|
|
2170
2191
|
getWidth() {
|
|
2171
2192
|
return this._elementRef?.nativeElement?.getBoundingClientRect()?.width || 0;
|
|
2172
2193
|
}
|
|
2173
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchComponent, isStandalone: true, selector: "tedi-search", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, autocompleteOptions: { classPropertyName: "autocompleteOptions", publicName: "autocompleteOptions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteFrom: { classPropertyName: "autocompleteFrom", publicName: "autocompleteFrom", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, withButton: { classPropertyName: "withButton", publicName: "withButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, _inputValue: { classPropertyName: "_inputValue", publicName: "_inputValue", isSignal: true, isRequired: false, transformFunction: null }, _selectedOption: { classPropertyName: "_selectedOption", publicName: "_selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent", clearEvent: "clearEvent", _inputValue: "_inputValueChange", _selectedOption: "_selectedOptionChange" }, host: { properties: { "class.tedi-search": "true", "class.tedi-search--with-button": "withButton()", "class.tedi-search--with-button-text": "!!buttonText()", "class.tedi-search--disabled": "_disabled()", "class": "modifierClasses()" } }, providers: [
|
|
2175
2196
|
{
|
|
2176
2197
|
provide: NG_VALUE_ACCESSOR,
|
|
2177
2198
|
useExisting: forwardRef(() => SearchComponent),
|
|
2178
2199
|
multi: true,
|
|
2179
2200
|
},
|
|
2180
|
-
], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;border:1px solid;align-items:center;border-color:var(--_border-color);border-radius:var(--_border-radius);margin-bottom:var(--_form-field-outer-gap);gap:var(--form-field-inner-spacing)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{width:100%;flex-grow:1;border:0;padding:var(--_padding);padding-right:0;margin:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0;letter-spacing:0;font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height)}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0;align-self:stretch}.tedi-search__suffix{display:flex;align-self:stretch;align-items:center;padding:0 var(--_padding);gap:var(--layout-grid-gutters-04)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;border-left:1px solid var(--general-border-primary);height:1em}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0;max-height:300px;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{height:auto;width:56px}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button .tedi-icon--size-24{font-size:var(--icon-05)}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{background-color:var(--form-input-background-disabled);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2201
|
+
], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2181
2202
|
}
|
|
2182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
|
|
2183
2204
|
type: Component,
|
|
2184
2205
|
args: [{ selector: "tedi-search", standalone: true, imports: [
|
|
2185
2206
|
FormsModule,
|
|
@@ -2207,8 +2228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2207
2228
|
useExisting: forwardRef(() => SearchComponent),
|
|
2208
2229
|
multi: true,
|
|
2209
2230
|
},
|
|
2210
|
-
], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;
|
|
2211
|
-
}] });
|
|
2231
|
+
], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"] }]
|
|
2232
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], autocompleteOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteOptions", required: false }] }], autocompleteFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteFrom", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], withButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clearEvent: [{ type: i0.Output, args: ["clearEvent"] }], _inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "_inputValue", required: false }] }, { type: i0.Output, args: ["_inputValueChange"] }], _selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "_selectedOption", required: false }] }, { type: i0.Output, args: ["_selectedOptionChange"] }], _cdkMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenu), { ...{ read: ElementRef }, isSignal: true }] }], _overlayOriginRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
2212
2233
|
|
|
2213
2234
|
const IECkiloBytes = 1024;
|
|
2214
2235
|
const SIkiloBytes = 1000;
|
|
@@ -2358,7 +2379,7 @@ function validateFileType(maxSize, acceptFileTypes, file, standard, translate) {
|
|
|
2358
2379
|
|
|
2359
2380
|
class FileService {
|
|
2360
2381
|
mode = signal("append").asReadonly();
|
|
2361
|
-
_files = signal([]);
|
|
2382
|
+
_files = signal([], ...(ngDevMode ? [{ debugName: "_files" }] : []));
|
|
2362
2383
|
get files() {
|
|
2363
2384
|
return this._files.asReadonly();
|
|
2364
2385
|
}
|
|
@@ -2433,15 +2454,15 @@ class FileService {
|
|
|
2433
2454
|
});
|
|
2434
2455
|
return new FileDropzone(file);
|
|
2435
2456
|
}
|
|
2436
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2437
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2457
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2458
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileService });
|
|
2438
2459
|
}
|
|
2439
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileService, decorators: [{
|
|
2440
2461
|
type: Injectable
|
|
2441
2462
|
}] });
|
|
2442
2463
|
|
|
2443
2464
|
class FileDropzoneComponent {
|
|
2444
|
-
_ngControl;
|
|
2465
|
+
_ngControl = inject(NgControl, { self: true });
|
|
2445
2466
|
/**
|
|
2446
2467
|
* Specifies the allowed file types (e.g., "image/png, image/jpeg").
|
|
2447
2468
|
*
|
|
@@ -2449,12 +2470,12 @@ class FileDropzoneComponent {
|
|
|
2449
2470
|
*
|
|
2450
2471
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
|
|
2451
2472
|
**/
|
|
2452
|
-
accept = input("");
|
|
2473
|
+
accept = input("", ...(ngDevMode ? [{ debugName: "accept" }] : []));
|
|
2453
2474
|
/**
|
|
2454
2475
|
* The maximum file size allowed for upload, in bytes.
|
|
2455
2476
|
* @default 0 (no limit)
|
|
2456
2477
|
**/
|
|
2457
|
-
maxSize = input(0);
|
|
2478
|
+
maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
|
|
2458
2479
|
/**
|
|
2459
2480
|
* Specifies the standard to use when displaying file sizes or maximum file size.
|
|
2460
2481
|
* Options are "SI" (base 10) or "IEC" (base 2).
|
|
@@ -2466,41 +2487,41 @@ class FileDropzoneComponent {
|
|
|
2466
2487
|
*
|
|
2467
2488
|
* https://wiki.ubuntu.com/UnitsPolicy
|
|
2468
2489
|
*/
|
|
2469
|
-
sizeDisplayStandard = input("IEC");
|
|
2490
|
+
sizeDisplayStandard = input("IEC", ...(ngDevMode ? [{ debugName: "sizeDisplayStandard" }] : []));
|
|
2470
2491
|
/**
|
|
2471
2492
|
* Determines if multiple files can be uploaded at once via the file picker.
|
|
2472
2493
|
*
|
|
2473
2494
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/multiple
|
|
2474
2495
|
* @default false
|
|
2475
2496
|
**/
|
|
2476
|
-
multiple = input(false);
|
|
2497
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
2477
2498
|
/**
|
|
2478
2499
|
* If true, each file is validated separately instead of rejecting all at once.
|
|
2479
2500
|
@default false
|
|
2480
2501
|
**/
|
|
2481
|
-
validateIndividually = input(false);
|
|
2502
|
+
validateIndividually = input(false, ...(ngDevMode ? [{ debugName: "validateIndividually" }] : []));
|
|
2482
2503
|
/**
|
|
2483
2504
|
* An array of default files that are preloaded in the upload list.
|
|
2484
2505
|
* @default false
|
|
2485
2506
|
**/
|
|
2486
|
-
defaultFiles = input([]);
|
|
2507
|
+
defaultFiles = input([], ...(ngDevMode ? [{ debugName: "defaultFiles" }] : []));
|
|
2487
2508
|
/**
|
|
2488
2509
|
* The unique identifier for the input element that this label is associated with.
|
|
2489
2510
|
* This ID should match the input element's `id` attribute to ensure accessibility.
|
|
2490
2511
|
*/
|
|
2491
|
-
inputId = input();
|
|
2512
|
+
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
|
|
2492
2513
|
/**
|
|
2493
2514
|
* The name attribute for the file input, used for form submission and identifying the field.
|
|
2494
2515
|
*/
|
|
2495
|
-
name = input();
|
|
2516
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
2496
2517
|
/**
|
|
2497
2518
|
* The text label displayed for the file dropzone, providing context for users.
|
|
2498
2519
|
*/
|
|
2499
|
-
label = input("file-dropzone.label");
|
|
2520
|
+
label = input("file-dropzone.label", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2500
2521
|
/**
|
|
2501
2522
|
* Additional CSS class names to apply to the dropzone for custom styling
|
|
2502
2523
|
*/
|
|
2503
|
-
className = input();
|
|
2524
|
+
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
|
|
2504
2525
|
/**
|
|
2505
2526
|
* Specifies how to handle file name conflicts when multiple file of the same name are added.
|
|
2506
2527
|
* Options are:
|
|
@@ -2508,14 +2529,14 @@ class FileDropzoneComponent {
|
|
|
2508
2529
|
* - "replace": Replaces existing files with new files of the same name
|
|
2509
2530
|
* @default "append"
|
|
2510
2531
|
*/
|
|
2511
|
-
mode = input("append");
|
|
2532
|
+
mode = input("append", ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
2512
2533
|
/**
|
|
2513
2534
|
* If true, allows uploading folders instead of just files.
|
|
2514
2535
|
* This enables the user to select a folder and upload all its contents.
|
|
2515
2536
|
* Default file browser behaviour will prevent upload of files in this state.
|
|
2516
2537
|
* @default false
|
|
2517
2538
|
*/
|
|
2518
|
-
uploadFolder = input(false);
|
|
2539
|
+
uploadFolder = input(false, ...(ngDevMode ? [{ debugName: "uploadFolder" }] : []));
|
|
2519
2540
|
/**
|
|
2520
2541
|
* Validation functions that can be used to validate files.
|
|
2521
2542
|
* Each function should return a string error message if validation fails, or undefined if it passes
|
|
@@ -2524,13 +2545,13 @@ class FileDropzoneComponent {
|
|
|
2524
2545
|
validators = input([
|
|
2525
2546
|
validateFileSize,
|
|
2526
2547
|
validateFileType,
|
|
2527
|
-
]);
|
|
2548
|
+
], ...(ngDevMode ? [{ debugName: "validators" }] : []));
|
|
2528
2549
|
/**
|
|
2529
2550
|
* If true, shows the file dropzone as in a erroring state with red border.
|
|
2530
2551
|
* Overrides default validation state.
|
|
2531
2552
|
* @default false
|
|
2532
2553
|
**/
|
|
2533
|
-
hasError = input(false);
|
|
2554
|
+
hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
2534
2555
|
/**
|
|
2535
2556
|
* Output event triggered when files are added.
|
|
2536
2557
|
**/
|
|
@@ -2546,10 +2567,10 @@ class FileDropzoneComponent {
|
|
|
2546
2567
|
_destroyRef = inject(DestroyRef);
|
|
2547
2568
|
fileInputElement = viewChild.required("fileInput");
|
|
2548
2569
|
formatBytes = (bytes) => formatBytes(bytes, this.sizeDisplayStandard());
|
|
2549
|
-
uploadState = signal("none");
|
|
2550
|
-
isDragActive = signal(false);
|
|
2551
|
-
disabled = signal(false);
|
|
2552
|
-
uploadError = signal(undefined);
|
|
2570
|
+
uploadState = signal("none", ...(ngDevMode ? [{ debugName: "uploadState" }] : []));
|
|
2571
|
+
isDragActive = signal(false, ...(ngDevMode ? [{ debugName: "isDragActive" }] : []));
|
|
2572
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2573
|
+
uploadError = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadError" }] : []));
|
|
2553
2574
|
files = this._fileService.files;
|
|
2554
2575
|
classes = computed(() => {
|
|
2555
2576
|
const classList = ["tedi-file-dropzone"];
|
|
@@ -2569,14 +2590,13 @@ class FileDropzoneComponent {
|
|
|
2569
2590
|
classList.push(this.className());
|
|
2570
2591
|
}
|
|
2571
2592
|
return classList.join(" ");
|
|
2572
|
-
});
|
|
2593
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
2573
2594
|
helperText = computed(() => ({
|
|
2574
2595
|
text: getDefaultHelpers(this.accept(), this.maxSize(), this.sizeDisplayStandard(), this._translationService.translate.bind(this._translationService)),
|
|
2575
2596
|
type: "hint",
|
|
2576
2597
|
position: "left",
|
|
2577
|
-
}));
|
|
2578
|
-
constructor(
|
|
2579
|
-
this._ngControl = _ngControl;
|
|
2598
|
+
}), ...(ngDevMode ? [{ debugName: "helperText" }] : []));
|
|
2599
|
+
constructor() {
|
|
2580
2600
|
this._ngControl.valueAccessor = this;
|
|
2581
2601
|
}
|
|
2582
2602
|
ngOnInit() {
|
|
@@ -2625,21 +2645,6 @@ class FileDropzoneComponent {
|
|
|
2625
2645
|
});
|
|
2626
2646
|
return issues;
|
|
2627
2647
|
}
|
|
2628
|
-
fileClasses = (file) => {
|
|
2629
|
-
const classList = ["tedi-file-dropzone__file-item"];
|
|
2630
|
-
if (file.className) {
|
|
2631
|
-
classList.push(...file.className);
|
|
2632
|
-
}
|
|
2633
|
-
if (file.fileStatus != "none") {
|
|
2634
|
-
classList.push(`tedi-file-dropzone__file-item--${file.fileStatus}`);
|
|
2635
|
-
}
|
|
2636
|
-
return classList.join(" ");
|
|
2637
|
-
};
|
|
2638
|
-
tooltipClasses = (file) => {
|
|
2639
|
-
const classes = ["tedi-file-dropzone__tooltip"];
|
|
2640
|
-
classes.push(`tedi-file-dropzone__tooltip--${file.helper?.type || "hint"}`);
|
|
2641
|
-
return classes.join(" ");
|
|
2642
|
-
};
|
|
2643
2648
|
selectionChange = (event) => {
|
|
2644
2649
|
const fileList = event.target.files;
|
|
2645
2650
|
const files = Array.from(fileList || []);
|
|
@@ -2721,28 +2726,25 @@ class FileDropzoneComponent {
|
|
|
2721
2726
|
setDisabledState(isDisabled) {
|
|
2722
2727
|
this.disabled.set(isDisabled);
|
|
2723
2728
|
}
|
|
2724
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2725
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2729
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2730
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n @for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-attachment\n [name]=\"file.label ?? file.name\"\n [fileSize]=\"formatBytes(file.size)\"\n [invalid]=\"file.fileStatus === 'invalid'\"\n [error]=\"\n validateIndividually() && file.fileStatus === 'invalid'\n ? file.helper?.text\n : undefined\n \"\n >\n <tedi-attachment-actions>\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"\n ('remove' | tediTranslate) + ' ' + (file.label ?? file.name)\n \"\n [disabled]=\"file.disabled\"\n (click)=\"removeFile(file)\"\n >\n <tedi-icon name=\"delete\" [size]=\"18\" />\n </button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>\n {{ (\"remove\" | tediTranslate) + \" \" + (file.label ?? file.name) }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n </tedi-attachment-actions>\n </tedi-attachment>\n </div>\n }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n @if (this.uploadError(); as message) {\n <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: AttachmentComponent, selector: "tedi-attachment", inputs: ["name", "fileSize", "icon", "error", "invalid", "direction", "verticalBelow"] }, { kind: "component", type: AttachmentActionsComponent, selector: "tedi-attachment-actions", inputs: ["padded"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
|
|
2726
2731
|
}
|
|
2727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileDropzoneComponent, decorators: [{
|
|
2728
2733
|
type: Component,
|
|
2729
2734
|
args: [{ selector: "tedi-file-dropzone", imports: [
|
|
2730
2735
|
IconComponent,
|
|
2731
2736
|
FeedbackTextComponent,
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2737
|
+
AttachmentComponent,
|
|
2738
|
+
AttachmentActionsComponent,
|
|
2739
|
+
ButtonComponent,
|
|
2735
2740
|
TooltipComponent,
|
|
2736
2741
|
TooltipTriggerComponent,
|
|
2737
2742
|
TooltipContentComponent,
|
|
2738
|
-
InfoButtonComponent,
|
|
2739
2743
|
ReactiveFormsModule,
|
|
2740
2744
|
VerticalSpacingDirective,
|
|
2741
2745
|
TediTranslationPipe,
|
|
2742
|
-
], providers: [FileService], template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n @for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-
|
|
2743
|
-
}], ctorParameters: () => [{ type:
|
|
2744
|
-
type: Self
|
|
2745
|
-
}] }], propDecorators: { onBlur: [{
|
|
2746
|
+
], providers: [FileService], template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n @for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-attachment\n [name]=\"file.label ?? file.name\"\n [fileSize]=\"formatBytes(file.size)\"\n [invalid]=\"file.fileStatus === 'invalid'\"\n [error]=\"\n validateIndividually() && file.fileStatus === 'invalid'\n ? file.helper?.text\n : undefined\n \"\n >\n <tedi-attachment-actions>\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"\n ('remove' | tediTranslate) + ' ' + (file.label ?? file.name)\n \"\n [disabled]=\"file.disabled\"\n (click)=\"removeFile(file)\"\n >\n <tedi-icon name=\"delete\" [size]=\"18\" />\n </button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>\n {{ (\"remove\" | tediTranslate) + \" \" + (file.label ?? file.name) }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n </tedi-attachment-actions>\n </tedi-attachment>\n </div>\n }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n @if (this.uploadError(); as message) {\n <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}\n"] }]
|
|
2747
|
+
}], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], sizeDisplayStandard: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeDisplayStandard", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], validateIndividually: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateIndividually", required: false }] }], defaultFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFiles", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], uploadFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFolder", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], fileDelete: [{ type: i0.Output, args: ["fileDelete"] }], fileInputElement: [{ type: i0.ViewChild, args: ["fileInput", { isSignal: true }] }], onBlur: [{
|
|
2746
2748
|
type: HostListener,
|
|
2747
2749
|
args: ["blur"]
|
|
2748
2750
|
}], openFilePicker: [{
|
|
@@ -2763,14 +2765,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2763
2765
|
}] } });
|
|
2764
2766
|
|
|
2765
2767
|
class BreadcrumbsComponent {
|
|
2766
|
-
crumbs = input([]);
|
|
2767
|
-
shortCrumbs = input(false);
|
|
2768
|
-
xs = input();
|
|
2769
|
-
sm = input();
|
|
2770
|
-
md = input();
|
|
2771
|
-
lg = input();
|
|
2772
|
-
xl = input();
|
|
2773
|
-
xxl = input();
|
|
2768
|
+
crumbs = input([], ...(ngDevMode ? [{ debugName: "crumbs" }] : []));
|
|
2769
|
+
shortCrumbs = input(false, ...(ngDevMode ? [{ debugName: "shortCrumbs" }] : []));
|
|
2770
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
2771
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
2772
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
2773
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
2774
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
2775
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
2774
2776
|
breakpointService = inject(BreakpointService);
|
|
2775
2777
|
breakpointInputs = computed(() => {
|
|
2776
2778
|
return this.breakpointService.getBreakpointInputs({
|
|
@@ -2783,7 +2785,7 @@ class BreadcrumbsComponent {
|
|
|
2783
2785
|
xl: this.xl(),
|
|
2784
2786
|
xxl: this.xxl(),
|
|
2785
2787
|
});
|
|
2786
|
-
});
|
|
2788
|
+
}, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
2787
2789
|
getSecondLastCrumb() {
|
|
2788
2790
|
const crumbs = this.breakpointInputs().crumbs;
|
|
2789
2791
|
if (crumbs.length > 1) {
|
|
@@ -2791,10 +2793,10 @@ class BreadcrumbsComponent {
|
|
|
2791
2793
|
}
|
|
2792
2794
|
return null;
|
|
2793
2795
|
}
|
|
2794
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2795
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2796
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2797
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { crumbs: { classPropertyName: "crumbs", publicName: "crumbs", isSignal: true, isRequired: false, transformFunction: null }, shortCrumbs: { classPropertyName: "shortCrumbs", publicName: "shortCrumbs", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (breakpointInputs().crumbs.length > 0) {\n <nav aria-label=\"Breadcrumb\" class=\"tedi-breadcrumbs\">\n <ol class=\"tedi-breadcrumbs__list\">\n @if (!breakpointInputs().shortCrumbs) {\n @for (crumb of breakpointInputs().crumbs; track crumb.href; let last = $last) {\n @if (!last) {\n <li class=\"tedi-breadcrumbs__item\">\n <a tedi-link [routerLink]=\"crumb.href\" [underline]=\"false\">{{\n crumb.label\n }}</a>\n <tedi-icon color=\"brand\" name=\"chevron_right\" />\n </li>\n } @else {\n <li\n aria-current=\"page\"\n tedi-text\n modifiers=\"inline-block\"\n color=\"secondary\"\n >\n {{ crumb.label }}\n </li>\n }\n }\n }\n </ol>\n @if (breakpointInputs().crumbs.length > 1 && breakpointInputs().shortCrumbs) {\n <div class=\"tedi-breadcrumbs__item\">\n <tedi-icon color=\"brand\" name=\"arrow_back\" />\n <a\n tedi-link\n [routerLink]=\"getSecondLastCrumb()?.href\"\n [underline]=\"false\"\n >{{ getSecondLastCrumb()?.label }}</a\n >\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;list-style:none}.tedi-breadcrumbs__item{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
|
|
2796
2798
|
}
|
|
2797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
2798
2800
|
type: Component,
|
|
2799
2801
|
args: [{ selector: "tedi-breadcrumbs", standalone: true, imports: [
|
|
2800
2802
|
RouterLink,
|
|
@@ -2802,22 +2804,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2802
2804
|
IconComponent,
|
|
2803
2805
|
TextComponent,
|
|
2804
2806
|
], template: "@if (breakpointInputs().crumbs.length > 0) {\n <nav aria-label=\"Breadcrumb\" class=\"tedi-breadcrumbs\">\n <ol class=\"tedi-breadcrumbs__list\">\n @if (!breakpointInputs().shortCrumbs) {\n @for (crumb of breakpointInputs().crumbs; track crumb.href; let last = $last) {\n @if (!last) {\n <li class=\"tedi-breadcrumbs__item\">\n <a tedi-link [routerLink]=\"crumb.href\" [underline]=\"false\">{{\n crumb.label\n }}</a>\n <tedi-icon color=\"brand\" name=\"chevron_right\" />\n </li>\n } @else {\n <li\n aria-current=\"page\"\n tedi-text\n modifiers=\"inline-block\"\n color=\"secondary\"\n >\n {{ crumb.label }}\n </li>\n }\n }\n }\n </ol>\n @if (breakpointInputs().crumbs.length > 1 && breakpointInputs().shortCrumbs) {\n <div class=\"tedi-breadcrumbs__item\">\n <tedi-icon color=\"brand\" name=\"arrow_back\" />\n <a\n tedi-link\n [routerLink]=\"getSecondLastCrumb()?.href\"\n [underline]=\"false\"\n >{{ getSecondLastCrumb()?.label }}</a\n >\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;list-style:none}.tedi-breadcrumbs__item{display:flex;align-items:center}\n"] }]
|
|
2805
|
-
}] });
|
|
2807
|
+
}], propDecorators: { crumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "crumbs", required: false }] }], shortCrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortCrumbs", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
2806
2808
|
|
|
2807
2809
|
class PaginationPageComponent {
|
|
2808
|
-
page = input.required();
|
|
2809
|
-
active = input();
|
|
2810
|
+
page = input.required(...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
2811
|
+
active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
|
|
2810
2812
|
pageSelected = output();
|
|
2811
2813
|
selectPage() {
|
|
2812
2814
|
this.pageSelected.emit();
|
|
2813
2815
|
}
|
|
2814
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2816
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2817
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationPageComponent, isStandalone: true, selector: "tedi-pagination-page", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSelected: "pageSelected" }, ngImport: i0, template: "@if (page() === -1) {\n <span tedi-text color=\"secondary\">...</span>\n} @else {\n <button\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--active]=\"active()\"\n type=\"button\"\n [attr.aria-current]=\"active() ? 'page' : undefined\"\n [attr.aria-label]=\"'pagination.page' | tediTranslate: page() : active()\"\n (click)=\"selectPage()\"\n >\n {{ page() }}\n </button>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--_pagination-button-size);width:var(--_pagination-button-size)}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2816
2818
|
}
|
|
2817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2819
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationPageComponent, decorators: [{
|
|
2818
2820
|
type: Component,
|
|
2819
2821
|
args: [{ selector: "tedi-pagination-page", imports: [TextComponent, TediTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (page() === -1) {\n <span tedi-text color=\"secondary\">...</span>\n} @else {\n <button\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--active]=\"active()\"\n type=\"button\"\n [attr.aria-current]=\"active() ? 'page' : undefined\"\n [attr.aria-label]=\"'pagination.page' | tediTranslate: page() : active()\"\n (click)=\"selectPage()\"\n >\n {{ page() }}\n </button>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--_pagination-button-size);width:var(--_pagination-button-size)}\n"] }]
|
|
2820
|
-
}] });
|
|
2822
|
+
}], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], pageSelected: [{ type: i0.Output, args: ["pageSelected"] }] } });
|
|
2821
2823
|
|
|
2822
2824
|
const getPagesToDisplay = (currentPage, lastPage) => {
|
|
2823
2825
|
const pages = new Set([1, currentPage, lastPage].filter((nr) => Boolean(nr)));
|
|
@@ -2849,21 +2851,21 @@ const getPagesToDisplay = (currentPage, lastPage) => {
|
|
|
2849
2851
|
* @deprecated Use Pagination from TEDI-ready instead. This component will be removed from future versions.
|
|
2850
2852
|
*/
|
|
2851
2853
|
class PaginationComponent {
|
|
2852
|
-
page = model(1);
|
|
2853
|
-
pageSize = model(50);
|
|
2854
|
-
pageSizeOptions = input([10, 50, 100]);
|
|
2855
|
-
length = input(0);
|
|
2856
|
-
hideResults = input(false, { transform: booleanAttribute });
|
|
2857
|
-
hidePageSize = input(false, { transform: booleanAttribute });
|
|
2854
|
+
page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
2855
|
+
pageSize = model(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
2856
|
+
pageSizeOptions = input([10, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
|
|
2857
|
+
length = input(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
|
|
2858
|
+
hideResults = input(false, ...(ngDevMode ? [{ debugName: "hideResults", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
2859
|
+
hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
2858
2860
|
lastPage = computed(() => {
|
|
2859
2861
|
return Math.ceil(this.length() / this.pageSize());
|
|
2860
|
-
});
|
|
2862
|
+
}, ...(ngDevMode ? [{ debugName: "lastPage" }] : []));
|
|
2861
2863
|
dropdownId = crypto.randomUUID();
|
|
2862
2864
|
pages = computed(() => {
|
|
2863
2865
|
return getPagesToDisplay(this.page(), this.lastPage());
|
|
2864
|
-
});
|
|
2865
|
-
hasPreviousButton = computed(() => this.page() > 1);
|
|
2866
|
-
hasNextButton = computed(() => this.page() < this.lastPage());
|
|
2866
|
+
}, ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
2867
|
+
hasPreviousButton = computed(() => this.page() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousButton" }] : []));
|
|
2868
|
+
hasNextButton = computed(() => this.page() < this.lastPage(), ...(ngDevMode ? [{ debugName: "hasNextButton" }] : []));
|
|
2867
2869
|
changePage(step) {
|
|
2868
2870
|
this.page.update((currentPage) => currentPage + step);
|
|
2869
2871
|
}
|
|
@@ -2873,10 +2875,10 @@ class PaginationComponent {
|
|
|
2873
2875
|
pageSizeChanged() {
|
|
2874
2876
|
this.page.set(1);
|
|
2875
2877
|
}
|
|
2876
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2877
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2879
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"tedi-pagination\">\n @if (!hideResults()) {\n <span\n tedi-text\n class=\"tedi-pagination__results\"\n color=\"secondary\"\n modifiers=\"small\"\n >{{ length() }} {{ \"pagination.results\" | tediTranslate: length() }}</span\n >\n }\n <nav\n [attr.aria-label]=\"'pagination.title' | tediTranslate\"\n class=\"tedi-pagination__pager\"\n >\n <ul class=\"tedi-pagination__pages\">\n <li>\n <button\n tedi-button\n [disabled]=\"!hasPreviousButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(-1)\"\n [attr.aria-label]=\"'pagination.prev-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_back\" />\n </button>\n </li>\n @for (pageNr of pages(); track $index) {\n <li>\n <tedi-pagination-page\n [page]=\"pageNr\"\n [active]=\"pageNr === page()\"\n (pageSelected)=\"selectPage(pageNr)\"\n />\n </li>\n }\n <li>\n <button\n tedi-button\n [disabled]=\"!hasNextButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(1)\"\n [attr.aria-label]=\"'pagination.next-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_forward\" />\n </button>\n </li>\n </ul>\n </nav>\n\n @if (!hidePageSize()) {\n <div class=\"tedi-pagination__page-size-options\">\n <label tedi-text color=\"secondary\" modifiers=\"small\" [for]=\"dropdownId\">{{\n \"pagination.page-size\" | tediTranslate\n }}</label>\n <select\n [id]=\"dropdownId\"\n [(ngModel)]=\"pageSize\"\n (change)=\"pageSizeChanged()\"\n class=\"tedi-pagination__dropdown\"\n >\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n }\n</div>\n", styles: [".tedi-pagination{--_pagination-border: var(--general-border-secondary, #9293a4);--_pagination-background: var(--general-surface-primary, #fff);--_pagination-page-background: transparent;--_pagination-page-text: var(--general-text-secondary, #4b4e62);--_pagination-layout: \"results page-size-options\" \"pager pager\";--_pagination-padding-y: var(--pagination-padding-y);--_pagination-padding-x: var(--pagination-padding-x);--_pagination-button-size: var(--pagination-button-size);border-top:1px solid var(--_pagination-border);background:var(--_pagination-background);padding:var(--_pagination-padding-y) var(--_pagination-padding-x);display:grid;align-items:center;grid-template-areas:var(--_pagination-layout);gap:var(--layout-grid-gutters-04)}@media(min-width:48rem){.tedi-pagination{--_pagination-layout: \"results pager page-size-options\";grid-template-columns:repeat(3,1fr)}}.tedi-pagination__results{grid-area:results}.tedi-pagination__pager{grid-area:pager;justify-self:center}.tedi-pagination__pages{display:flex;justify-items:center;align-items:center;list-style:none;margin:0;gap:var(--layout-grid-gutters-08)}.tedi-pagination__page{display:flex;justify-content:center;align-items:center;height:100%;width:100%;flex-shrink:0;border-radius:50%;border:none;background:var(--_pagination-page-background);color:var(--_pagination-page-text);cursor:pointer}.tedi-pagination__page:hover{--_pagination-page-background: var( --button-main-neutral-icon-only-background-hover, #e7f0f6 );--_pagination-page-text: var(--button-main-neutral-text-hover, #004277)}.tedi-pagination__page:active{--_pagination-page-background: var( --button-main-neutral-icon-only-background-active, #d0e1ee );--_pagination-page-text: var(--button-main-neutral-text-active, #003662)}.tedi-pagination__page:focus{--_pagination-page-background: var( --button-main-neutral-icon-only-background-focus, rgba(0, 0, 0, 0) );--_pagination-page-text: var(--button-main-neutral-text-focus, #005aa3)}.tedi-pagination__page.tedi-pagination__page--active{--_pagination-page-background: var( --general-surface-brand-secondary, #004277 );--_pagination-page-text: var(--general-text-white, #fff);pointer-events:none}.tedi-pagination__nav-button.tedi-button[disabled]{color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}.tedi-pagination__page-size-options{grid-area:page-size-options;display:flex;align-items:center;justify-self:flex-end;gap:var(--form-field-inner-spacing)}.tedi-pagination__dropdown{border:1px solid var(--form-input-border-default, #838494);border-radius:var(--form-field-radius);min-height:var(--form-field-height-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PaginationPageComponent, selector: "tedi-pagination-page", inputs: ["page", "active"], outputs: ["pageSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2878
2880
|
}
|
|
2879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
2880
2882
|
type: Component,
|
|
2881
2883
|
args: [{ selector: "tedi-pagination", imports: [
|
|
2882
2884
|
ButtonComponent,
|
|
@@ -2885,12 +2887,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2885
2887
|
TediTranslationPipe,
|
|
2886
2888
|
PaginationPageComponent,
|
|
2887
2889
|
FormsModule,
|
|
2888
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-pagination\">\n @if (!hideResults()) {\n <span\n tedi-text\n class=\"tedi-pagination__results\"\n color=\"secondary\"\n modifiers=\"small\"\n >{{ length() }} {{ \"pagination.results\" | tediTranslate: length() }}</span\n >\n }\n <nav\n [attr.aria-label]=\"'pagination.title' | tediTranslate\"\n class=\"tedi-pagination__pager\"\n >\n <ul class=\"tedi-pagination__pages\">\n <li>\n <button\n tedi-button\n [disabled]=\"!hasPreviousButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(-1)\"\n [attr.aria-label]=\"'pagination.prev-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_back\" />\n </button>\n </li>\n @for (pageNr of pages(); track $index) {\n <li>\n <tedi-pagination-page\n [page]=\"pageNr\"\n [active]=\"pageNr === page()\"\n (pageSelected)=\"selectPage(pageNr)\"\n />\n </li>\n }\n <li>\n <button\n tedi-button\n [disabled]=\"!hasNextButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(1)\"\n [attr.aria-label]=\"'pagination.next-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_forward\" />\n </button>\n </li>\n </ul>\n </nav>\n\n @if (!hidePageSize()) {\n <div class=\"tedi-pagination__page-size-options\">\n <label tedi-text color=\"secondary\" modifiers=\"small\" [for]=\"dropdownId\">{{\n \"pagination.page-size\" | tediTranslate\n }}</label>\n <select\n [id]=\"dropdownId\"\n [(ngModel)]=\"pageSize\"\n (change)=\"pageSizeChanged()\"\n class=\"tedi-pagination__dropdown\"\n >\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n }\n</div>\n", styles: [".tedi-pagination{--_pagination-border: var(--general-border-secondary, #9293a4);--_pagination-background: var(--general-surface-primary, #fff);--_pagination-page-background: transparent;--_pagination-page-text: var(--general-text-secondary, #4b4e62);--_pagination-layout: \"results page-size-options\" \"pager pager\";--_pagination-padding-y: var(--pagination-padding-y);--_pagination-padding-x: var(--pagination-padding-x);--_pagination-button-size: var(--pagination-button-size);border-top:1px solid var(--_pagination-border);background:var(--_pagination-background);padding:var(--_pagination-padding-y) var(--_pagination-padding-x);display:grid;align-items:center;grid-template-areas:var(--_pagination-layout);gap:var(--layout-grid-gutters-04)}@media
|
|
2889
|
-
}] });
|
|
2890
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-pagination\">\n @if (!hideResults()) {\n <span\n tedi-text\n class=\"tedi-pagination__results\"\n color=\"secondary\"\n modifiers=\"small\"\n >{{ length() }} {{ \"pagination.results\" | tediTranslate: length() }}</span\n >\n }\n <nav\n [attr.aria-label]=\"'pagination.title' | tediTranslate\"\n class=\"tedi-pagination__pager\"\n >\n <ul class=\"tedi-pagination__pages\">\n <li>\n <button\n tedi-button\n [disabled]=\"!hasPreviousButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(-1)\"\n [attr.aria-label]=\"'pagination.prev-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_back\" />\n </button>\n </li>\n @for (pageNr of pages(); track $index) {\n <li>\n <tedi-pagination-page\n [page]=\"pageNr\"\n [active]=\"pageNr === page()\"\n (pageSelected)=\"selectPage(pageNr)\"\n />\n </li>\n }\n <li>\n <button\n tedi-button\n [disabled]=\"!hasNextButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(1)\"\n [attr.aria-label]=\"'pagination.next-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_forward\" />\n </button>\n </li>\n </ul>\n </nav>\n\n @if (!hidePageSize()) {\n <div class=\"tedi-pagination__page-size-options\">\n <label tedi-text color=\"secondary\" modifiers=\"small\" [for]=\"dropdownId\">{{\n \"pagination.page-size\" | tediTranslate\n }}</label>\n <select\n [id]=\"dropdownId\"\n [(ngModel)]=\"pageSize\"\n (change)=\"pageSizeChanged()\"\n class=\"tedi-pagination__dropdown\"\n >\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n }\n</div>\n", styles: [".tedi-pagination{--_pagination-border: var(--general-border-secondary, #9293a4);--_pagination-background: var(--general-surface-primary, #fff);--_pagination-page-background: transparent;--_pagination-page-text: var(--general-text-secondary, #4b4e62);--_pagination-layout: \"results page-size-options\" \"pager pager\";--_pagination-padding-y: var(--pagination-padding-y);--_pagination-padding-x: var(--pagination-padding-x);--_pagination-button-size: var(--pagination-button-size);border-top:1px solid var(--_pagination-border);background:var(--_pagination-background);padding:var(--_pagination-padding-y) var(--_pagination-padding-x);display:grid;align-items:center;grid-template-areas:var(--_pagination-layout);gap:var(--layout-grid-gutters-04)}@media(min-width:48rem){.tedi-pagination{--_pagination-layout: \"results pager page-size-options\";grid-template-columns:repeat(3,1fr)}}.tedi-pagination__results{grid-area:results}.tedi-pagination__pager{grid-area:pager;justify-self:center}.tedi-pagination__pages{display:flex;justify-items:center;align-items:center;list-style:none;margin:0;gap:var(--layout-grid-gutters-08)}.tedi-pagination__page{display:flex;justify-content:center;align-items:center;height:100%;width:100%;flex-shrink:0;border-radius:50%;border:none;background:var(--_pagination-page-background);color:var(--_pagination-page-text);cursor:pointer}.tedi-pagination__page:hover{--_pagination-page-background: var( --button-main-neutral-icon-only-background-hover, #e7f0f6 );--_pagination-page-text: var(--button-main-neutral-text-hover, #004277)}.tedi-pagination__page:active{--_pagination-page-background: var( --button-main-neutral-icon-only-background-active, #d0e1ee );--_pagination-page-text: var(--button-main-neutral-text-active, #003662)}.tedi-pagination__page:focus{--_pagination-page-background: var( --button-main-neutral-icon-only-background-focus, rgba(0, 0, 0, 0) );--_pagination-page-text: var(--button-main-neutral-text-focus, #005aa3)}.tedi-pagination__page.tedi-pagination__page--active{--_pagination-page-background: var( --general-surface-brand-secondary, #004277 );--_pagination-page-text: var(--general-text-white, #fff);pointer-events:none}.tedi-pagination__nav-button.tedi-button[disabled]{color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}.tedi-pagination__page-size-options{grid-area:page-size-options;display:flex;align-items:center;justify-self:flex-end;gap:var(--form-field-inner-spacing)}.tedi-pagination__dropdown{border:1px solid var(--form-input-border-default, #838494);border-radius:var(--form-field-radius);min-height:var(--form-field-height-sm)}\n"] }]
|
|
2891
|
+
}], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], hideResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideResults", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }] } });
|
|
2890
2892
|
|
|
2891
2893
|
class TableOfContentsItemComponent {
|
|
2892
|
-
idTo = input.required();
|
|
2893
|
-
selected = signal(false);
|
|
2894
|
+
idTo = input.required(...(ngDevMode ? [{ debugName: "idTo" }] : []));
|
|
2895
|
+
selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
2894
2896
|
itemSelected = new EventEmitter();
|
|
2895
2897
|
classes = computed(() => {
|
|
2896
2898
|
const classes = ["table-of-contents__item"];
|
|
@@ -2898,23 +2900,23 @@ class TableOfContentsItemComponent {
|
|
|
2898
2900
|
classes.push("table-of-contents__item--active");
|
|
2899
2901
|
}
|
|
2900
2902
|
return classes.join(" ");
|
|
2901
|
-
});
|
|
2903
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
2902
2904
|
itemClick() {
|
|
2903
2905
|
this.itemSelected.emit(this.idTo());
|
|
2904
2906
|
}
|
|
2905
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2906
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2907
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TableOfContentsItemComponent, isStandalone: true, selector: "tedi-table-of-contents-item", inputs: { idTo: { classPropertyName: "idTo", publicName: "idTo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <a\n tedi-button\n variant=\"neutral\"\n class=\"table-of-contents__item-anchor\"\n (click)=\"itemClick()\"\n >\n <ng-content />\n </a>\n\n <ng-content\n select=\"tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper\"\n />\n</div>\n", styles: [".table-of-contents__item{display:flex;flex-direction:column;gap:var(--tedi-dimensions-05)}.table-of-contents__item--active .table-of-contents__item-anchor{border-color:var(--link-primary-default);color:var(--link-primary-active)}.table-of-contents__item--active .table-of-contents__item-anchor:hover{border-color:var(--link-primary-active)}.table-of-contents__item .table-of-contents__item .table-of-contents__item-anchor{padding-left:var(--table-of-contents-padding-left-level-2)}.table-of-contents__item-anchor{display:flex;align-items:flex-start;flex-direction:column;--_table-of-contents-inset: 1px;padding:0 calc(var(--table-of-contents-padding-level-1) - var(--_table-of-contents-inset));border:0;border-left:var(--table-of-contents-active-item-border-width) solid transparent;border-radius:0;margin-left:-var(--_table-of-contents-inset)}.table-of-contents__item-anchor:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }] });
|
|
2907
2909
|
}
|
|
2908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2910
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemComponent, decorators: [{
|
|
2909
2911
|
type: Component,
|
|
2910
2912
|
args: [{ selector: "tedi-table-of-contents-item", imports: [ButtonComponent], template: "<div [class]=\"classes()\">\n <a\n tedi-button\n variant=\"neutral\"\n class=\"table-of-contents__item-anchor\"\n (click)=\"itemClick()\"\n >\n <ng-content />\n </a>\n\n <ng-content\n select=\"tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper\"\n />\n</div>\n", styles: [".table-of-contents__item{display:flex;flex-direction:column;gap:var(--tedi-dimensions-05)}.table-of-contents__item--active .table-of-contents__item-anchor{border-color:var(--link-primary-default);color:var(--link-primary-active)}.table-of-contents__item--active .table-of-contents__item-anchor:hover{border-color:var(--link-primary-active)}.table-of-contents__item .table-of-contents__item .table-of-contents__item-anchor{padding-left:var(--table-of-contents-padding-left-level-2)}.table-of-contents__item-anchor{display:flex;align-items:flex-start;flex-direction:column;--_table-of-contents-inset: 1px;padding:0 calc(var(--table-of-contents-padding-level-1) - var(--_table-of-contents-inset));border:0;border-left:var(--table-of-contents-active-item-border-width) solid transparent;border-radius:0;margin-left:-var(--_table-of-contents-inset)}.table-of-contents__item-anchor:hover{text-decoration:underline}\n"] }]
|
|
2911
|
-
}] });
|
|
2913
|
+
}], propDecorators: { idTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "idTo", required: true }] }] } });
|
|
2912
2914
|
|
|
2913
2915
|
class TableOfContentsComponent {
|
|
2914
2916
|
/**
|
|
2915
2917
|
* Heading of the table of contents
|
|
2916
2918
|
*/
|
|
2917
|
-
heading = input.required();
|
|
2919
|
+
heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
|
|
2918
2920
|
/**
|
|
2919
2921
|
* Should component be initially shown. Won't work with open and onToggle.
|
|
2920
2922
|
* @default false
|
|
@@ -2928,7 +2930,7 @@ class TableOfContentsComponent {
|
|
|
2928
2930
|
/**
|
|
2929
2931
|
* Should child table of contents elements when clicked scroll
|
|
2930
2932
|
*/
|
|
2931
|
-
scrollOnClick = input(true);
|
|
2933
|
+
scrollOnClick = input(true, ...(ngDevMode ? [{ debugName: "scrollOnClick" }] : []));
|
|
2932
2934
|
/**
|
|
2933
2935
|
* Callback when component is toggled.
|
|
2934
2936
|
* Use to handle state outside of component, should use with open prop.
|
|
@@ -2938,35 +2940,35 @@ class TableOfContentsComponent {
|
|
|
2938
2940
|
* Position strategy of the table of contents
|
|
2939
2941
|
* @default default
|
|
2940
2942
|
*/
|
|
2941
|
-
position = input("default");
|
|
2943
|
+
position = input("default", ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
2942
2944
|
/**
|
|
2943
2945
|
* ARIA label for the <nav> component
|
|
2944
2946
|
*/
|
|
2945
|
-
ariaLabel = input("Table of contents");
|
|
2947
|
+
ariaLabel = input("Table of contents", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
2946
2948
|
/**
|
|
2947
2949
|
* Breakpoint to switch to modal view
|
|
2948
2950
|
* @default mobile
|
|
2949
2951
|
*/
|
|
2950
|
-
modalBreakpoint = input("mobile");
|
|
2952
|
+
modalBreakpoint = input("mobile", ...(ngDevMode ? [{ debugName: "modalBreakpoint" }] : []));
|
|
2951
2953
|
/**
|
|
2952
2954
|
* Should the component track scroll and update active item
|
|
2953
2955
|
*/
|
|
2954
|
-
scrollAware = input(true);
|
|
2956
|
+
scrollAware = input(true, ...(ngDevMode ? [{ debugName: "scrollAware" }] : []));
|
|
2955
2957
|
isSeeking = false;
|
|
2956
2958
|
seekingTimeout;
|
|
2957
2959
|
dialogRef;
|
|
2958
|
-
isOpen = signal(false);
|
|
2959
|
-
templateRef = viewChild("defaultTemplate");
|
|
2960
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2961
|
+
templateRef = viewChild("defaultTemplate", ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
|
|
2960
2962
|
intersectionObservers = [];
|
|
2961
|
-
tableItems = contentChildren(TableOfContentsItemComponent, {
|
|
2962
|
-
|
|
2963
|
-
|
|
2963
|
+
tableItems = contentChildren(TableOfContentsItemComponent, ...(ngDevMode ? [{ debugName: "tableItems", descendants: true }] : [{
|
|
2964
|
+
descendants: true,
|
|
2965
|
+
}]));
|
|
2964
2966
|
router = inject(Router);
|
|
2965
2967
|
dialog = inject(Dialog);
|
|
2966
2968
|
update$ = new Subject();
|
|
2967
2969
|
itemsChanged$ = new Subject();
|
|
2968
|
-
activeElement = computed(() => this.tableItems().find((item) => item.selected()));
|
|
2969
|
-
activeId = computed(() => this.activeElement()?.idTo());
|
|
2970
|
+
activeElement = computed(() => this.tableItems().find((item) => item.selected()), ...(ngDevMode ? [{ debugName: "activeElement" }] : []));
|
|
2971
|
+
activeId = computed(() => this.activeElement()?.idTo(), ...(ngDevMode ? [{ debugName: "activeId" }] : []));
|
|
2970
2972
|
classes = computed(() => {
|
|
2971
2973
|
const classes = ["table-of-contents"];
|
|
2972
2974
|
classes.push(`table-of-contents--position-${this.position() ?? "default"}`);
|
|
@@ -2977,12 +2979,12 @@ class TableOfContentsComponent {
|
|
|
2977
2979
|
classes.push("table-of-contents--modal-active");
|
|
2978
2980
|
}
|
|
2979
2981
|
return classes.join(" ");
|
|
2980
|
-
});
|
|
2982
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
2981
2983
|
footerClasses = computed(() => {
|
|
2982
2984
|
const classes = ["table-of-contents__footer"];
|
|
2983
2985
|
classes.push(`table-of-contents__footer--modal-breakpoint-${this.modalBreakpoint()}`);
|
|
2984
2986
|
return classes.join(" ");
|
|
2985
|
-
});
|
|
2987
|
+
}, ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
|
|
2986
2988
|
constructor() {
|
|
2987
2989
|
effect(() => {
|
|
2988
2990
|
const items = this.tableItems();
|
|
@@ -3100,10 +3102,10 @@ class TableOfContentsComponent {
|
|
|
3100
3102
|
this.intersectionObservers.forEach((obs) => obs.disconnect());
|
|
3101
3103
|
this.intersectionObservers = [];
|
|
3102
3104
|
}
|
|
3103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3105
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card>\n <tedi-card-content class=\"table-of-contents__content\">\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
|
|
3105
3107
|
}
|
|
3106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, decorators: [{
|
|
3107
3109
|
type: Component,
|
|
3108
3110
|
args: [{ selector: "tedi-table-of-contents", imports: [
|
|
3109
3111
|
CardComponent,
|
|
@@ -3113,8 +3115,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3113
3115
|
IconComponent,
|
|
3114
3116
|
TediTranslationPipe,
|
|
3115
3117
|
NgTemplateOutlet,
|
|
3116
|
-
], template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card>\n <tedi-card-content class=\"table-of-contents__content\">\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media
|
|
3117
|
-
}], ctorParameters: () => [] })
|
|
3118
|
+
], template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card>\n <tedi-card-content class=\"table-of-contents__content\">\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
|
|
3119
|
+
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], scrollOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOnClick", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], modalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalBreakpoint", required: false }] }], scrollAware: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAware", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ["defaultTemplate", { isSignal: true }] }], tableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableOfContentsItemComponent), { ...{
|
|
3120
|
+
descendants: true,
|
|
3121
|
+
}, isSignal: true }] }] } });
|
|
3118
3122
|
|
|
3119
3123
|
/**
|
|
3120
3124
|
* Wrapper component for nested table of contents items.
|
|
@@ -3122,10 +3126,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3122
3126
|
* which is a issue when you use `@if() {}` syntax inside a component that uses ng-content.
|
|
3123
3127
|
*/
|
|
3124
3128
|
class TableOfContentsNestedWrapperComponent {
|
|
3125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3129
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsNestedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TableOfContentsNestedWrapperComponent, isStandalone: true, selector: "tedi-table-of-contents-nested-wrapper", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
3127
3131
|
}
|
|
3128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsNestedWrapperComponent, decorators: [{
|
|
3129
3133
|
type: Component,
|
|
3130
3134
|
args: [{
|
|
3131
3135
|
selector: "tedi-table-of-contents-nested-wrapper",
|
|
@@ -3134,30 +3138,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3134
3138
|
}] });
|
|
3135
3139
|
|
|
3136
3140
|
class TabContentComponent {
|
|
3137
|
-
tabId = input.required();
|
|
3141
|
+
tabId = input.required(...(ngDevMode ? [{ debugName: "tabId" }] : []));
|
|
3138
3142
|
content = viewChild.required("content");
|
|
3139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
3143
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TabContentComponent, isStandalone: true, selector: "tedi-tab-content", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content />\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3141
3145
|
}
|
|
3142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabContentComponent, decorators: [{
|
|
3143
3147
|
type: Component,
|
|
3144
3148
|
args: [{ selector: "tedi-tab-content", imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content>\n <ng-content />\n</ng-template>\n" }]
|
|
3145
|
-
}] });
|
|
3149
|
+
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: true }] }], content: [{ type: i0.ViewChild, args: ["content", { isSignal: true }] }] } });
|
|
3146
3150
|
|
|
3147
3151
|
class TabComponent {
|
|
3148
|
-
element;
|
|
3149
|
-
tabId = input.required();
|
|
3150
|
-
selected = model(false);
|
|
3151
|
-
disabledInput = input(false, {
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3152
|
+
element = inject(ElementRef);
|
|
3153
|
+
tabId = input.required(...(ngDevMode ? [{ debugName: "tabId" }] : []));
|
|
3154
|
+
selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
3155
|
+
disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", transform: booleanAttribute,
|
|
3156
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
3157
|
+
alias: "disabled" }] : [{
|
|
3158
|
+
transform: booleanAttribute,
|
|
3159
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
3160
|
+
alias: "disabled",
|
|
3161
|
+
}]));
|
|
3156
3162
|
disabled; // for cdk/a11y keymanager
|
|
3157
3163
|
tabSelected = output();
|
|
3158
3164
|
routerLinkActive = inject(RouterLinkActive, { self: true });
|
|
3159
3165
|
linkActive = toSignal(this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive)));
|
|
3160
|
-
isTabActive = computed(() => this.selected() || this.linkActive());
|
|
3166
|
+
isTabActive = computed(() => this.selected() || this.linkActive(), ...(ngDevMode ? [{ debugName: "isTabActive" }] : []));
|
|
3161
3167
|
selectTab() {
|
|
3162
3168
|
this.selected.set(true);
|
|
3163
3169
|
this.tabSelected.emit();
|
|
@@ -3165,17 +3171,16 @@ class TabComponent {
|
|
|
3165
3171
|
focus() {
|
|
3166
3172
|
this.element.nativeElement.focus();
|
|
3167
3173
|
}
|
|
3168
|
-
constructor(
|
|
3169
|
-
this.element = element;
|
|
3174
|
+
constructor() {
|
|
3170
3175
|
effect(() => {
|
|
3171
3176
|
this.disabled = this.disabledInput();
|
|
3172
3177
|
});
|
|
3173
3178
|
this.routerLinkActive.routerLinkActive = ["tedi-tab--active"]; // should be changed once hostDirectives allow default values
|
|
3174
3179
|
}
|
|
3175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TabComponent, isStandalone: true, selector: "[tedi-tab]", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", tabSelected: "tabSelected" }, host: { listeners: { "click": "selectTab()" }, properties: { "class.tedi-tab": "true", "class.tedi-tab--selected": "selected()", "class.tedi-tab--disabled": "disabledInput()", "attr.role": "'tab'" } }, hostDirectives: [{ directive: i1$3.RouterLinkActive, inputs: ["routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"], outputs: ["isActiveChange", "isActiveChange"] }], ngImport: i0, template: "<ng-content />\n", styles: [".tedi-tab{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);--_tab-padding: var(--_tab-padding-y) var(--_tab-padding-x);--_tab-selected-border: var(--tab-item-selected-border);--_tab-padding-y: var(--tab-spacing-y);--_tab-padding-x: var(--tab-spacing-x);--_tab-inner-spacing: var(--tab-inner-spacing);padding:var(--_tab-padding);background:var(--_tab-background);color:var(--_tab-color);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--_tab-inner-spacing);border:none;cursor:pointer;text-decoration:none;font-size:var(--body-regular-size)}.tedi-tab:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tab:hover,.tedi-tab:focus{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tab--selected,.tedi-tab--active{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tab--selected:after,.tedi-tab--active:after{content:\"\";position:absolute;border-top:3px solid var(--_tab-selected-border);top:0;left:0;right:0}.tedi-tab--disabled{pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3177
3182
|
}
|
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabComponent, decorators: [{
|
|
3179
3184
|
type: Component,
|
|
3180
3185
|
args: [{ selector: "[tedi-tab]", imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3181
3186
|
"[class.tedi-tab]": "true",
|
|
@@ -3190,20 +3195,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3190
3195
|
outputs: ["isActiveChange"],
|
|
3191
3196
|
},
|
|
3192
3197
|
], template: "<ng-content />\n", styles: [".tedi-tab{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);--_tab-padding: var(--_tab-padding-y) var(--_tab-padding-x);--_tab-selected-border: var(--tab-item-selected-border);--_tab-padding-y: var(--tab-spacing-y);--_tab-padding-x: var(--tab-spacing-x);--_tab-inner-spacing: var(--tab-inner-spacing);padding:var(--_tab-padding);background:var(--_tab-background);color:var(--_tab-color);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--_tab-inner-spacing);border:none;cursor:pointer;text-decoration:none;font-size:var(--body-regular-size)}.tedi-tab:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tab:hover,.tedi-tab:focus{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tab--selected,.tedi-tab--active{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tab--selected:after,.tedi-tab--active:after{content:\"\";position:absolute;border-top:3px solid var(--_tab-selected-border);top:0;left:0;right:0}.tedi-tab--disabled{pointer-events:none}\n"] }]
|
|
3193
|
-
}], ctorParameters: () => [{ type: i0.
|
|
3198
|
+
}], ctorParameters: () => [], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }] } });
|
|
3194
3199
|
|
|
3195
3200
|
class TabsComponent {
|
|
3196
3201
|
injector = inject(Injector);
|
|
3197
|
-
mobileTabsOpened = signal(false);
|
|
3198
|
-
tabs = contentChildren(TabComponent);
|
|
3199
|
-
tabContents = contentChildren(TabContentComponent);
|
|
3202
|
+
mobileTabsOpened = signal(false, ...(ngDevMode ? [{ debugName: "mobileTabsOpened" }] : []));
|
|
3203
|
+
tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
3204
|
+
tabContents = contentChildren(TabContentComponent, ...(ngDevMode ? [{ debugName: "tabContents" }] : []));
|
|
3200
3205
|
keyManager;
|
|
3201
3206
|
activeTabId = computed(() => this.tabs()
|
|
3202
3207
|
.find((tab) => tab.isTabActive())
|
|
3203
|
-
?.tabId());
|
|
3208
|
+
?.tabId(), ...(ngDevMode ? [{ debugName: "activeTabId" }] : []));
|
|
3204
3209
|
activeTabContent = computed(() => this.tabContents()
|
|
3205
3210
|
.find((content) => content.tabId() === this.activeTabId())
|
|
3206
|
-
?.content());
|
|
3211
|
+
?.content(), ...(ngDevMode ? [{ debugName: "activeTabContent" }] : []));
|
|
3207
3212
|
onActiveTabChanges(tabs) {
|
|
3208
3213
|
tabs.forEach((tab) => {
|
|
3209
3214
|
tab.tabSelected.subscribe(() => {
|
|
@@ -3230,10 +3235,10 @@ class TabsComponent {
|
|
|
3230
3235
|
.withWrap()
|
|
3231
3236
|
.withHorizontalOrientation("ltr");
|
|
3232
3237
|
}
|
|
3233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3238
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsComponent, isStandalone: true, selector: "tedi-tabs", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.tedi-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "tabContents", predicate: TabContentComponent, isSignal: true }], ngImport: i0, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3235
3240
|
}
|
|
3236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, decorators: [{
|
|
3237
3242
|
type: Component,
|
|
3238
3243
|
args: [{ selector: "tedi-tabs", imports: [
|
|
3239
3244
|
CommonModule,
|
|
@@ -3245,49 +3250,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3245
3250
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3246
3251
|
"[class.tedi-tabs]": "true",
|
|
3247
3252
|
"(keydown)": "onKeyDown($event)",
|
|
3248
|
-
}, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media
|
|
3249
|
-
}], ctorParameters: () => [] });
|
|
3253
|
+
}, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
|
|
3254
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabContentComponent), { isSignal: true }] }] } });
|
|
3250
3255
|
|
|
3251
3256
|
class VerticalStepperComponent {
|
|
3252
|
-
ariaLabel = input();
|
|
3253
|
-
compact = input(false, { transform: booleanAttribute });
|
|
3254
|
-
enumerated = input(false, { transform: booleanAttribute });
|
|
3255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3257
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
3258
|
+
compact = input(false, ...(ngDevMode ? [{ debugName: "compact", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3259
|
+
enumerated = input(false, ...(ngDevMode ? [{ debugName: "enumerated", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: VerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: VerticalStepperComponent, isStandalone: true, selector: "tedi-vertical-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, enumerated: { classPropertyName: "enumerated", publicName: "enumerated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-vertical-stepper": "true", "class.tedi-vertical-stepper--compact": "compact()" } }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [".tedi-vertical-stepper{counter-reset:step-number}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3257
3262
|
}
|
|
3258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: VerticalStepperComponent, decorators: [{
|
|
3259
3264
|
type: Component,
|
|
3260
3265
|
args: [{ selector: "tedi-vertical-stepper", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3261
3266
|
"[class.tedi-vertical-stepper]": "true",
|
|
3262
3267
|
"[class.tedi-vertical-stepper--compact]": "compact()",
|
|
3263
3268
|
}, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [".tedi-vertical-stepper{counter-reset:step-number}\n"] }]
|
|
3264
|
-
}] });
|
|
3269
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], enumerated: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumerated", required: false }] }] } });
|
|
3265
3270
|
|
|
3266
3271
|
class VerticalStepperItemComponent {
|
|
3267
|
-
completed = input(false, { transform: booleanAttribute });
|
|
3268
|
-
error = input(false, { transform: booleanAttribute });
|
|
3269
|
-
selected = input(false, { transform: booleanAttribute });
|
|
3270
|
-
disabled = input(false, { transform: booleanAttribute });
|
|
3271
|
-
informative = input(false, { transform: booleanAttribute });
|
|
3272
|
-
title = input.required();
|
|
3273
|
-
route = input(undefined);
|
|
3274
|
-
opened = model(false); // for items with children
|
|
3272
|
+
completed = input(false, ...(ngDevMode ? [{ debugName: "completed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3273
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3274
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3275
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3276
|
+
informative = input(false, ...(ngDevMode ? [{ debugName: "informative", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3277
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3278
|
+
route = input(undefined, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
3279
|
+
opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : [])); // for items with children
|
|
3275
3280
|
itemSelect = output();
|
|
3276
3281
|
stepperContext = inject(VerticalStepperComponent, { optional: true });
|
|
3277
|
-
subItem = signal(false);
|
|
3278
|
-
subItems = contentChildren(VerticalStepperItemComponent);
|
|
3279
|
-
compact = computed(() => this.stepperContext?.compact());
|
|
3280
|
-
enumerated = computed(() => this.stepperContext?.enumerated());
|
|
3281
|
-
hasSubItems = computed(() => !!this.subItems().length);
|
|
3282
|
+
subItem = signal(false, ...(ngDevMode ? [{ debugName: "subItem" }] : []));
|
|
3283
|
+
subItems = contentChildren(VerticalStepperItemComponent, ...(ngDevMode ? [{ debugName: "subItems" }] : []));
|
|
3284
|
+
compact = computed(() => this.stepperContext?.compact(), ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
3285
|
+
enumerated = computed(() => this.stepperContext?.enumerated(), ...(ngDevMode ? [{ debugName: "enumerated" }] : []));
|
|
3286
|
+
hasSubItems = computed(() => !!this.subItems().length, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
|
|
3282
3287
|
onSubItemSelect = effect(() => {
|
|
3283
3288
|
const subItemSelected = this.subItems().some((item) => item.selected());
|
|
3284
3289
|
if (subItemSelected) {
|
|
3285
3290
|
this.opened.set(true);
|
|
3286
3291
|
}
|
|
3287
|
-
});
|
|
3292
|
+
}, ...(ngDevMode ? [{ debugName: "onSubItemSelect" }] : []));
|
|
3288
3293
|
onSubItemChanges = effect(() => {
|
|
3289
3294
|
this.subItems().forEach((item) => item.subItem.set(true));
|
|
3290
|
-
});
|
|
3295
|
+
}, ...(ngDevMode ? [{ debugName: "onSubItemChanges" }] : []));
|
|
3291
3296
|
toggleOpen() {
|
|
3292
3297
|
this.opened.update((previouslyOpened) => !previouslyOpened);
|
|
3293
3298
|
}
|
|
@@ -3296,10 +3301,10 @@ class VerticalStepperItemComponent {
|
|
|
3296
3301
|
this.itemSelect.emit();
|
|
3297
3302
|
}
|
|
3298
3303
|
}
|
|
3299
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: VerticalStepperItemComponent, isStandalone: true, selector: "tedi-vertical-stepper-item", inputs: { completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, informative: { classPropertyName: "informative", publicName: "informative", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", itemSelect: "itemSelect" }, host: { properties: { "class.tedi-vertical-stepper-item": "true", "class.tedi-vertical-stepper-item--completed": "completed()", "class.tedi-vertical-stepper-item--error": "error()", "class.tedi-vertical-stepper-item--selected": "selected()", "class.tedi-vertical-stepper-item--disabled": "disabled()", "class.tedi-vertical-stepper-item--informative": "informative()", "class.tedi-vertical-stepper-item--sub-item": "subItem()", "class.tedi-vertical-stepper-item--compact": "compact()", "class.tedi-vertical-stepper-item--enumerated": "enumerated()", "attr.role": "'listitem'" } }, queries: [{ propertyName: "subItems", predicate: VerticalStepperItemComponent, isSignal: true }], ngImport: i0, template: "<ng-template #statusIcon>\n @if (subItem() || !compact()) {\n @if (completed()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.completed' | tediTranslate\"\n name=\"check\"\n color=\"success\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n } @else if (error()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.error' | tediTranslate\"\n name=\"error\"\n color=\"danger\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n }\n }\n</ng-template>\n\n<div class=\"tedi-vertical-stepper-item__indicator\">\n @if (!selected() && compact() && !subItem()) {\n @if (completed()) {\n <tedi-icon name=\"check\" color=\"white\" [size]=\"16\" />\n } @else if (error()) {\n <tedi-icon name=\"exclamation\" color=\"white\" [size]=\"16\" />\n }\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__line\"></div>\n<div class=\"tedi-vertical-stepper-item__title\">\n @if (hasSubItems()) {\n <button\n [disabled]=\"disabled()\"\n (click)=\"toggleOpen()\"\n class=\"tedi-vertical-stepper-item__toggle\"\n [attr.aria-expanded]=\"opened()\"\n >\n <span>{{ title() }}</span\n ><ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n class=\"tedi-vertical-stepper-item__toggle-icon\"\n [class.tedi-vertical-stepper-item__toggle-icon--opened]=\"opened()\"\n />\n </button>\n } @else {\n <ng-content select=\"[item-title]\">\n @if (route()) {\n <a\n [routerLink]=\"disabled() ? undefined : route()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n routerLinkActive\n (isActiveChange)=\"routerLinkActiveChange($event)\"\n >{{ title() }}</a\n >\n } @else {\n <button\n [disabled]=\"disabled()\"\n (click)=\"itemSelect.emit()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n >\n {{ title() }}\n </button>\n }\n </ng-content>\n <ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container>\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__description\">\n <ng-content select=\"[item-description]\" />\n</div>\n@if (opened()) {\n <ng-content select=\"tedi-vertical-stepper-item\" />\n}\n", styles: [".tedi-vertical-stepper-item{display:grid;position:relative;--_step-indicator-size: 24px;--_step-indicator-color: var(--general-text-secondary, #4b4e62);--_step-indicator-border: var(--stepper-step-default-border, #9293a4);--_step-indicator-border-hover: var( --stepper-step-default-border-hover, #005aa3 );--_step-indicator-border-width: 1px;--_step-indicator-background: var(--stepper-step-default-bg, #fff);--_step-indicator-background-hover: var(--stepper-step-default-bg, #fff);--_step-padding: var(--stepper-item-vertical-lg-padding-top, 8px);--_step-inner-spacing: var(--stepper-item-vertical-lg-inner-spacing, 8px);--_step-line-color: var(--stepper-item-vertical-line, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-default, #151926);--_step-title-color-hover: var(--stepper-item-vertical-text-hover, #004277);--_step-title-size: var(--body-regular-size, 16px);--_step-title-weight: var(--body-regular-weight, 400);--_step-title-line-height: var(--body-regular-line-height, 24px);--_step-title-spacing: var(--layout-grid-gutters-08, 8px);grid-template-areas:\"indicator title\" \". description\";grid-template-columns:auto 1fr;grid-auto-columns:auto;column-gap:var(--_step-inner-spacing);z-index:0}.tedi-vertical-stepper-item__indicator{grid-area:indicator;display:flex;align-items:center;justify-content:center;height:var(--_step-indicator-size);width:var(--_step-indicator-size);border:var(--_step-indicator-border) solid var(--_step-indicator-border-width);background-color:var(--_step-indicator-background);color:var(--_step-indicator-color);border-radius:9999px;font-size:var(--body-small-bold-size, 14px);font-weight:var(--body-bold-weight, 700);align-self:center;justify-self:center}.tedi-vertical-stepper-item__indicator:before{content:counter(step-number)}.tedi-vertical-stepper-item:has(>.tedi-vertical-stepper-item__title :is(button,a):hover)>.tedi-vertical-stepper-item__indicator{background-color:var(--_step-indicator-background-hover);border-color:var(--_step-indicator-border-hover)}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item){counter-increment:step-number}.tedi-vertical-stepper-item__title{grid-area:title;padding:var(--_step-padding) 0}.tedi-vertical-stepper-item__title a,.tedi-vertical-stepper-item__title button{padding:0;background:none;border:none;text-decoration:none;font-family:var(--family-default, Roboto);font-size:var(--_step-title-size);font-weight:var(--_step-title-weight);line-height:var(--_step-title-line-height);cursor:pointer;color:var(--_step-title-color)}.tedi-vertical-stepper-item__title a:hover,.tedi-vertical-stepper-item__title button:hover{color:var(--_step-title-color-hover)}.tedi-vertical-stepper-item__title a:hover:not(.tedi-vertical-stepper-item__toggle),.tedi-vertical-stepper-item__title button:hover:not(.tedi-vertical-stepper-item__toggle){text-decoration:underline}.tedi-vertical-stepper-item__toggle{display:flex;width:100%;align-items:center}.tedi-vertical-stepper-item__toggle:hover>span{text-decoration:underline}.tedi-vertical-stepper-item__toggle-icon{margin-left:auto;transition:transform .3s}.tedi-vertical-stepper-item__toggle-icon--opened{transform:rotateX(180deg)}.tedi-vertical-stepper-item__status-icon{margin-inline:var(--_step-title-spacing)}.tedi-vertical-stepper-item__description{grid-area:description}.tedi-vertical-stepper-item__description:empty{display:none}.tedi-vertical-stepper-item__line:before,.tedi-vertical-stepper-item__line:after{content:\"\";grid-row:1/span 1;grid-column:1/span 1;left:50%;transform:translate(-50%);position:absolute;width:1px;background-color:var(--_step-line-color);top:0;bottom:0;z-index:-1}.tedi-vertical-stepper-item__line:before{grid-row:1/span 1}.tedi-vertical-stepper-item__line:after{grid-row:2/span 1}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):first-child>.tedi-vertical-stepper-item__line:before{top:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child:not(:has(.tedi-vertical-stepper-item--sub-item))>.tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child>.tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item--compact{--_step-indicator-size: var(--stepper-item-vertical-step-size-md, 16px);--_step-padding: var(--stepper-item-vertical-compact-padding-top, 3px);--_step-inner-spacing: var( --stepper-item-vertical-compact-inner-spacing, 6px );--_step-title-spacing: var(--layout-grid-gutters-04, 4px)}.tedi-vertical-stepper-item--compact .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--compact.tedi-vertical-stepper-item--enumerated:not(.tedi-vertical-stepper-item--sub-item)>.tedi-vertical-stepper-item__title :is(a,button):before{content:counter(step-number) \".\";display:inline-block}.tedi-vertical-stepper-item--sub-item{grid-column:1/span 2;grid-template-columns:subgrid;--_step-indicator-size: var(--stepper-item-vertical-step-size-sm, 9px);--_step-padding: var(--stepper-item-vertical-padding-y-sm, 2px)}.tedi-vertical-stepper-item--sub-item .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--completed{--_step-indicator-background: var(--stepper-step-completed-bg, #266b42);--_step-indicator-border: var(--stepper-step-completed-bg, #266b42);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-completed-bg-hover, #1d5032 );--_step-indicator-background-hover: var( --stepper-step-completed-bg-hover, #1d5032 )}.tedi-vertical-stepper-item--error{--_step-indicator-background: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-border: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-danger-bg-hover, #812525 );--_step-indicator-background-hover: var( --stepper-step-danger-bg-hover, #812525 )}.tedi-vertical-stepper-item--selected{--_step-indicator-background: var(--stepper-step-selected-bg, #fff);--_step-indicator-color: var( --stepper-item-vertical-text-selected, #004277 );--_step-indicator-border: var(--stepper-step-selected-border, #004277);--_step-indicator-border-width: 2px;--_step-indicator-border-hover: var( --stepper-step-selected-border-hover, #003662 );--_step-title-color: var(--stepper-item-vertical-text-selected, #004277);--_step-title-weight: var(--body-bold-weight, 700)}.tedi-vertical-stepper-item--selected.tedi-vertical-stepper-item--compact:not(.tedi-vertical-stepper-item--sub-item){--_step-indicator-border-width: 4px}.tedi-vertical-stepper-item--disabled{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-color: var( --stepper-item-vertical-text-disabled, #9293a4 );--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-disabled, #9293a4)}.tedi-vertical-stepper-item--disabled .tedi-vertical-stepper-item__title{pointer-events:none}.tedi-vertical-stepper-item--informative{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--general-text-tertiary, #5d6071)}.tedi-vertical-stepper-item--informative .tedi-vertical-stepper-item__title{pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3304
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: VerticalStepperItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: VerticalStepperItemComponent, isStandalone: true, selector: "tedi-vertical-stepper-item", inputs: { completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, informative: { classPropertyName: "informative", publicName: "informative", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", itemSelect: "itemSelect" }, host: { properties: { "class.tedi-vertical-stepper-item": "true", "class.tedi-vertical-stepper-item--completed": "completed()", "class.tedi-vertical-stepper-item--error": "error()", "class.tedi-vertical-stepper-item--selected": "selected()", "class.tedi-vertical-stepper-item--disabled": "disabled()", "class.tedi-vertical-stepper-item--informative": "informative()", "class.tedi-vertical-stepper-item--sub-item": "subItem()", "class.tedi-vertical-stepper-item--compact": "compact()", "class.tedi-vertical-stepper-item--enumerated": "enumerated()", "attr.role": "'listitem'" } }, queries: [{ propertyName: "subItems", predicate: VerticalStepperItemComponent, isSignal: true }], ngImport: i0, template: "<ng-template #statusIcon>\n @if (subItem() || !compact()) {\n @if (completed()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.completed' | tediTranslate\"\n name=\"check\"\n color=\"success\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n } @else if (error()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.error' | tediTranslate\"\n name=\"error\"\n color=\"danger\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n }\n }\n</ng-template>\n\n<div class=\"tedi-vertical-stepper-item__indicator\">\n @if (!selected() && compact() && !subItem()) {\n @if (completed()) {\n <tedi-icon name=\"check\" color=\"white\" [size]=\"16\" />\n } @else if (error()) {\n <tedi-icon name=\"exclamation\" color=\"white\" [size]=\"16\" />\n }\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__line\"></div>\n<div class=\"tedi-vertical-stepper-item__title\">\n @if (hasSubItems()) {\n <button\n [disabled]=\"disabled()\"\n (click)=\"toggleOpen()\"\n class=\"tedi-vertical-stepper-item__toggle\"\n [attr.aria-expanded]=\"opened()\"\n >\n <span>{{ title() }}</span\n ><ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n class=\"tedi-vertical-stepper-item__toggle-icon\"\n [class.tedi-vertical-stepper-item__toggle-icon--opened]=\"opened()\"\n />\n </button>\n } @else {\n <ng-content select=\"[item-title]\">\n @if (route()) {\n <a\n [routerLink]=\"disabled() ? undefined : route()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n routerLinkActive\n (isActiveChange)=\"routerLinkActiveChange($event)\"\n >{{ title() }}</a\n >\n } @else {\n <button\n [disabled]=\"disabled()\"\n (click)=\"itemSelect.emit()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n >\n {{ title() }}\n </button>\n }\n </ng-content>\n <ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container>\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__description\">\n <ng-content select=\"[item-description]\" />\n</div>\n@if (opened()) {\n <ng-content select=\"tedi-vertical-stepper-item\" />\n}\n", styles: [".tedi-vertical-stepper-item{display:grid;position:relative;--_step-indicator-size: 24px;--_step-indicator-color: var(--general-text-secondary, #4b4e62);--_step-indicator-border: var(--stepper-step-default-border, #9293a4);--_step-indicator-border-hover: var( --stepper-step-default-border-hover, #005aa3 );--_step-indicator-border-width: 1px;--_step-indicator-background: var(--stepper-step-default-bg, #fff);--_step-indicator-background-hover: var(--stepper-step-default-bg, #fff);--_step-padding: var(--stepper-item-vertical-lg-padding-top, 8px);--_step-inner-spacing: var(--stepper-item-vertical-lg-inner-spacing, 8px);--_step-line-color: var(--stepper-item-vertical-line, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-default, #151926);--_step-title-color-hover: var(--stepper-item-vertical-text-hover, #004277);--_step-title-size: var(--body-regular-size, 16px);--_step-title-weight: var(--body-regular-weight, 400);--_step-title-line-height: var(--body-regular-line-height, 24px);--_step-title-spacing: var(--layout-grid-gutters-08, 8px);grid-template-areas:\"indicator title\" \". description\";grid-template-columns:auto 1fr;grid-auto-columns:auto;column-gap:var(--_step-inner-spacing);z-index:0}.tedi-vertical-stepper-item__indicator{grid-area:indicator;display:flex;align-items:center;justify-content:center;height:var(--_step-indicator-size);width:var(--_step-indicator-size);border:var(--_step-indicator-border) solid var(--_step-indicator-border-width);background-color:var(--_step-indicator-background);color:var(--_step-indicator-color);border-radius:9999px;font-size:var(--body-small-bold-size, 14px);font-weight:var(--body-bold-weight, 700);align-self:center;justify-self:center}.tedi-vertical-stepper-item__indicator:before{content:counter(step-number)}.tedi-vertical-stepper-item:has(>.tedi-vertical-stepper-item__title :is(button,a):hover)>.tedi-vertical-stepper-item__indicator{background-color:var(--_step-indicator-background-hover);border-color:var(--_step-indicator-border-hover)}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item){counter-increment:step-number}.tedi-vertical-stepper-item__title{grid-area:title;padding:var(--_step-padding) 0}.tedi-vertical-stepper-item__title a,.tedi-vertical-stepper-item__title button{padding:0;background:none;border:none;text-decoration:none;font-family:var(--family-default, Roboto);font-size:var(--_step-title-size);font-weight:var(--_step-title-weight);line-height:var(--_step-title-line-height);cursor:pointer;color:var(--_step-title-color)}.tedi-vertical-stepper-item__title a:hover,.tedi-vertical-stepper-item__title button:hover{color:var(--_step-title-color-hover)}.tedi-vertical-stepper-item__title a:hover:not(.tedi-vertical-stepper-item__toggle),.tedi-vertical-stepper-item__title button:hover:not(.tedi-vertical-stepper-item__toggle){text-decoration:underline}.tedi-vertical-stepper-item__toggle{display:flex;width:100%;align-items:center}.tedi-vertical-stepper-item__toggle:hover>span{text-decoration:underline}.tedi-vertical-stepper-item__toggle-icon{margin-left:auto;transition:transform .3s}.tedi-vertical-stepper-item__toggle-icon--opened{transform:rotateX(180deg)}.tedi-vertical-stepper-item__status-icon{margin-inline:var(--_step-title-spacing)}.tedi-vertical-stepper-item__description{grid-area:description}.tedi-vertical-stepper-item__description:empty{display:none}.tedi-vertical-stepper-item__line:before,.tedi-vertical-stepper-item__line:after{content:\"\";grid-row:1/span 1;grid-column:1/span 1;left:50%;transform:translate(-50%);position:absolute;width:1px;background-color:var(--_step-line-color);top:0;bottom:0;z-index:-1}.tedi-vertical-stepper-item__line:before{grid-row:1/span 1}.tedi-vertical-stepper-item__line:after{grid-row:2/span 1}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):first-child>.tedi-vertical-stepper-item__line:before{top:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child:not(:has(.tedi-vertical-stepper-item--sub-item))>.tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child>.tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item--compact{--_step-indicator-size: var(--stepper-item-vertical-step-size-md, 16px);--_step-padding: var(--stepper-item-vertical-compact-padding-top, 3px);--_step-inner-spacing: var( --stepper-item-vertical-compact-inner-spacing, 6px );--_step-title-spacing: var(--layout-grid-gutters-04, 4px)}.tedi-vertical-stepper-item--compact .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--compact.tedi-vertical-stepper-item--enumerated:not(.tedi-vertical-stepper-item--sub-item)>.tedi-vertical-stepper-item__title :is(a,button):before{content:counter(step-number) \".\";display:inline-block}.tedi-vertical-stepper-item--sub-item{grid-column:1/span 2;grid-template-columns:subgrid;--_step-indicator-size: var(--stepper-item-vertical-step-size-sm, 9px);--_step-padding: var(--stepper-item-vertical-padding-y-sm, 2px)}.tedi-vertical-stepper-item--sub-item .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--completed{--_step-indicator-background: var(--stepper-step-completed-bg, #266b42);--_step-indicator-border: var(--stepper-step-completed-bg, #266b42);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-completed-bg-hover, #1d5032 );--_step-indicator-background-hover: var( --stepper-step-completed-bg-hover, #1d5032 )}.tedi-vertical-stepper-item--error{--_step-indicator-background: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-border: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-danger-bg-hover, #812525 );--_step-indicator-background-hover: var( --stepper-step-danger-bg-hover, #812525 )}.tedi-vertical-stepper-item--selected{--_step-indicator-background: var(--stepper-step-selected-bg, #fff);--_step-indicator-color: var( --stepper-item-vertical-text-selected, #004277 );--_step-indicator-border: var(--stepper-step-selected-border, #004277);--_step-indicator-border-width: 2px;--_step-indicator-border-hover: var( --stepper-step-selected-border-hover, #003662 );--_step-title-color: var(--stepper-item-vertical-text-selected, #004277);--_step-title-weight: var(--body-bold-weight, 700)}.tedi-vertical-stepper-item--selected.tedi-vertical-stepper-item--compact:not(.tedi-vertical-stepper-item--sub-item){--_step-indicator-border-width: 4px}.tedi-vertical-stepper-item--disabled{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-color: var( --stepper-item-vertical-text-disabled, #9293a4 );--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-disabled, #9293a4)}.tedi-vertical-stepper-item--disabled .tedi-vertical-stepper-item__title{pointer-events:none}.tedi-vertical-stepper-item--informative{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--general-text-tertiary, #5d6071)}.tedi-vertical-stepper-item--informative .tedi-vertical-stepper-item__title{pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3301
3306
|
}
|
|
3302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: VerticalStepperItemComponent, decorators: [{
|
|
3303
3308
|
type: Component,
|
|
3304
3309
|
args: [{ selector: "tedi-vertical-stepper-item", imports: [
|
|
3305
3310
|
IconComponent,
|
|
@@ -3319,17 +3324,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3319
3324
|
"[class.tedi-vertical-stepper-item--enumerated]": "enumerated()",
|
|
3320
3325
|
"[attr.role]": "'listitem'",
|
|
3321
3326
|
}, template: "<ng-template #statusIcon>\n @if (subItem() || !compact()) {\n @if (completed()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.completed' | tediTranslate\"\n name=\"check\"\n color=\"success\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n } @else if (error()) {\n <tedi-icon\n [attr.aria-label]=\"'vertical-stepper.error' | tediTranslate\"\n name=\"error\"\n color=\"danger\"\n [size]=\"16\"\n class=\"tedi-vertical-stepper-item__status-icon\"\n />\n }\n }\n</ng-template>\n\n<div class=\"tedi-vertical-stepper-item__indicator\">\n @if (!selected() && compact() && !subItem()) {\n @if (completed()) {\n <tedi-icon name=\"check\" color=\"white\" [size]=\"16\" />\n } @else if (error()) {\n <tedi-icon name=\"exclamation\" color=\"white\" [size]=\"16\" />\n }\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__line\"></div>\n<div class=\"tedi-vertical-stepper-item__title\">\n @if (hasSubItems()) {\n <button\n [disabled]=\"disabled()\"\n (click)=\"toggleOpen()\"\n class=\"tedi-vertical-stepper-item__toggle\"\n [attr.aria-expanded]=\"opened()\"\n >\n <span>{{ title() }}</span\n ><ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n class=\"tedi-vertical-stepper-item__toggle-icon\"\n [class.tedi-vertical-stepper-item__toggle-icon--opened]=\"opened()\"\n />\n </button>\n } @else {\n <ng-content select=\"[item-title]\">\n @if (route()) {\n <a\n [routerLink]=\"disabled() ? undefined : route()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n routerLinkActive\n (isActiveChange)=\"routerLinkActiveChange($event)\"\n >{{ title() }}</a\n >\n } @else {\n <button\n [disabled]=\"disabled()\"\n (click)=\"itemSelect.emit()\"\n [attr.aria-current]=\"selected() ? 'step' : undefined\"\n >\n {{ title() }}\n </button>\n }\n </ng-content>\n <ng-container *ngTemplateOutlet=\"statusIcon\"></ng-container>\n }\n</div>\n<div class=\"tedi-vertical-stepper-item__description\">\n <ng-content select=\"[item-description]\" />\n</div>\n@if (opened()) {\n <ng-content select=\"tedi-vertical-stepper-item\" />\n}\n", styles: [".tedi-vertical-stepper-item{display:grid;position:relative;--_step-indicator-size: 24px;--_step-indicator-color: var(--general-text-secondary, #4b4e62);--_step-indicator-border: var(--stepper-step-default-border, #9293a4);--_step-indicator-border-hover: var( --stepper-step-default-border-hover, #005aa3 );--_step-indicator-border-width: 1px;--_step-indicator-background: var(--stepper-step-default-bg, #fff);--_step-indicator-background-hover: var(--stepper-step-default-bg, #fff);--_step-padding: var(--stepper-item-vertical-lg-padding-top, 8px);--_step-inner-spacing: var(--stepper-item-vertical-lg-inner-spacing, 8px);--_step-line-color: var(--stepper-item-vertical-line, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-default, #151926);--_step-title-color-hover: var(--stepper-item-vertical-text-hover, #004277);--_step-title-size: var(--body-regular-size, 16px);--_step-title-weight: var(--body-regular-weight, 400);--_step-title-line-height: var(--body-regular-line-height, 24px);--_step-title-spacing: var(--layout-grid-gutters-08, 8px);grid-template-areas:\"indicator title\" \". description\";grid-template-columns:auto 1fr;grid-auto-columns:auto;column-gap:var(--_step-inner-spacing);z-index:0}.tedi-vertical-stepper-item__indicator{grid-area:indicator;display:flex;align-items:center;justify-content:center;height:var(--_step-indicator-size);width:var(--_step-indicator-size);border:var(--_step-indicator-border) solid var(--_step-indicator-border-width);background-color:var(--_step-indicator-background);color:var(--_step-indicator-color);border-radius:9999px;font-size:var(--body-small-bold-size, 14px);font-weight:var(--body-bold-weight, 700);align-self:center;justify-self:center}.tedi-vertical-stepper-item__indicator:before{content:counter(step-number)}.tedi-vertical-stepper-item:has(>.tedi-vertical-stepper-item__title :is(button,a):hover)>.tedi-vertical-stepper-item__indicator{background-color:var(--_step-indicator-background-hover);border-color:var(--_step-indicator-border-hover)}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item){counter-increment:step-number}.tedi-vertical-stepper-item__title{grid-area:title;padding:var(--_step-padding) 0}.tedi-vertical-stepper-item__title a,.tedi-vertical-stepper-item__title button{padding:0;background:none;border:none;text-decoration:none;font-family:var(--family-default, Roboto);font-size:var(--_step-title-size);font-weight:var(--_step-title-weight);line-height:var(--_step-title-line-height);cursor:pointer;color:var(--_step-title-color)}.tedi-vertical-stepper-item__title a:hover,.tedi-vertical-stepper-item__title button:hover{color:var(--_step-title-color-hover)}.tedi-vertical-stepper-item__title a:hover:not(.tedi-vertical-stepper-item__toggle),.tedi-vertical-stepper-item__title button:hover:not(.tedi-vertical-stepper-item__toggle){text-decoration:underline}.tedi-vertical-stepper-item__toggle{display:flex;width:100%;align-items:center}.tedi-vertical-stepper-item__toggle:hover>span{text-decoration:underline}.tedi-vertical-stepper-item__toggle-icon{margin-left:auto;transition:transform .3s}.tedi-vertical-stepper-item__toggle-icon--opened{transform:rotateX(180deg)}.tedi-vertical-stepper-item__status-icon{margin-inline:var(--_step-title-spacing)}.tedi-vertical-stepper-item__description{grid-area:description}.tedi-vertical-stepper-item__description:empty{display:none}.tedi-vertical-stepper-item__line:before,.tedi-vertical-stepper-item__line:after{content:\"\";grid-row:1/span 1;grid-column:1/span 1;left:50%;transform:translate(-50%);position:absolute;width:1px;background-color:var(--_step-line-color);top:0;bottom:0;z-index:-1}.tedi-vertical-stepper-item__line:before{grid-row:1/span 1}.tedi-vertical-stepper-item__line:after{grid-row:2/span 1}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):first-child>.tedi-vertical-stepper-item__line:before{top:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child:not(:has(.tedi-vertical-stepper-item--sub-item))>.tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child>.tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:before{bottom:50%}.tedi-vertical-stepper-item:not(.tedi-vertical-stepper-item--sub-item):last-child .tedi-vertical-stepper-item--sub-item:last-child .tedi-vertical-stepper-item__line:after{content:none}.tedi-vertical-stepper-item--compact{--_step-indicator-size: var(--stepper-item-vertical-step-size-md, 16px);--_step-padding: var(--stepper-item-vertical-compact-padding-top, 3px);--_step-inner-spacing: var( --stepper-item-vertical-compact-inner-spacing, 6px );--_step-title-spacing: var(--layout-grid-gutters-04, 4px)}.tedi-vertical-stepper-item--compact .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--compact.tedi-vertical-stepper-item--enumerated:not(.tedi-vertical-stepper-item--sub-item)>.tedi-vertical-stepper-item__title :is(a,button):before{content:counter(step-number) \".\";display:inline-block}.tedi-vertical-stepper-item--sub-item{grid-column:1/span 2;grid-template-columns:subgrid;--_step-indicator-size: var(--stepper-item-vertical-step-size-sm, 9px);--_step-padding: var(--stepper-item-vertical-padding-y-sm, 2px)}.tedi-vertical-stepper-item--sub-item .tedi-vertical-stepper-item__indicator:before{content:none}.tedi-vertical-stepper-item--completed{--_step-indicator-background: var(--stepper-step-completed-bg, #266b42);--_step-indicator-border: var(--stepper-step-completed-bg, #266b42);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-completed-bg-hover, #1d5032 );--_step-indicator-background-hover: var( --stepper-step-completed-bg-hover, #1d5032 )}.tedi-vertical-stepper-item--error{--_step-indicator-background: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-border: var(--stepper-step-danger-bg, #ac3232);--_step-indicator-color: var(--general-text-white, #fff);--_step-indicator-border-hover: var( --stepper-step-danger-bg-hover, #812525 );--_step-indicator-background-hover: var( --stepper-step-danger-bg-hover, #812525 )}.tedi-vertical-stepper-item--selected{--_step-indicator-background: var(--stepper-step-selected-bg, #fff);--_step-indicator-color: var( --stepper-item-vertical-text-selected, #004277 );--_step-indicator-border: var(--stepper-step-selected-border, #004277);--_step-indicator-border-width: 2px;--_step-indicator-border-hover: var( --stepper-step-selected-border-hover, #003662 );--_step-title-color: var(--stepper-item-vertical-text-selected, #004277);--_step-title-weight: var(--body-bold-weight, 700)}.tedi-vertical-stepper-item--selected.tedi-vertical-stepper-item--compact:not(.tedi-vertical-stepper-item--sub-item){--_step-indicator-border-width: 4px}.tedi-vertical-stepper-item--disabled{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-color: var( --stepper-item-vertical-text-disabled, #9293a4 );--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--stepper-item-vertical-text-disabled, #9293a4)}.tedi-vertical-stepper-item--disabled .tedi-vertical-stepper-item__title{pointer-events:none}.tedi-vertical-stepper-item--informative{--_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);--_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);--_step-title-color: var(--general-text-tertiary, #5d6071)}.tedi-vertical-stepper-item--informative .tedi-vertical-stepper-item__title{pointer-events:none}\n"] }]
|
|
3322
|
-
}] });
|
|
3327
|
+
}], propDecorators: { completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], informative: [{ type: i0.Input, args: [{ isSignal: true, alias: "informative", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], subItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => VerticalStepperItemComponent), { isSignal: true }] }] } });
|
|
3323
3328
|
|
|
3324
3329
|
class TableStylesComponent {
|
|
3325
|
-
size = input("default");
|
|
3326
|
-
verticalBorders = input(false, { transform: booleanAttribute });
|
|
3327
|
-
striped = input(false, { transform: booleanAttribute });
|
|
3328
|
-
clickable = input(false, { transform: booleanAttribute });
|
|
3329
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3330
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3330
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3331
|
+
verticalBorders = input(false, ...(ngDevMode ? [{ debugName: "verticalBorders", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3332
|
+
striped = input(false, ...(ngDevMode ? [{ debugName: "striped", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3333
|
+
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3334
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3335
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TableStylesComponent, isStandalone: true, selector: "tedi-table-styles", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-table-styles": "true", "class.tedi-table-styles--striped": "striped()", "class.tedi-table-styles--vertical-borders": "verticalBorders()", "class.tedi-table-styles--clickable": "clickable()", "class.tedi-table-styles--sm": "size() === 'small'" } }, ngImport: i0, template: "<div class=\"tedi-table-scroll\" cdkScrollable>\n <ng-content />\n</div>\n<ng-content select=\"tedi-pagination, [tedi-table-pagination]\" />\n", styles: [".tedi-table-styles{--_table-bg: var(--table-default);--_table-border: var(--table-border);--_table-contrast-border: var(--table-border-th);--_table-stripe: var(--table-striped);--_table-hover: var(--table-hover);--_table-color: var(--general-text-primary);--_table-header-color: var(--general-text-tertiary);--_table-radius: var(--table-radius);--_table-header-padding-y: var(--table-header-padding-y);--_table-header-padding-x: var(--table-header-padding-x);--_table-data-padding-y: var(--table-data-padding-y);--_table-data-padding-x: var(--table-data-padding-x);display:block;background:var(--_table-bg);border-radius:var(--_table-radius);border:1px solid var(--_table-border);overflow:hidden}.tedi-table-styles table{border-collapse:collapse;border-spacing:0;vertical-align:middle;width:100%;position:relative}.tedi-table-styles th,.tedi-table-styles td{text-align:left;font-family:var(--family-default);font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height)}.tedi-table-styles th{padding:var(--_table-header-padding-y) var(--_table-header-padding-x);border-bottom:1px solid var(--_table-contrast-border);color:var(--_table-header-color)}.tedi-table-styles td{padding:var(--_table-data-padding-y) var(--_table-data-padding-x);border-bottom:1px solid var(--_table-border);color:var(--_table-color)}.tedi-table-styles tr:last-child td{border-bottom:none}.tedi-table-styles .tedi-cell--align-center{text-align:center}.tedi-table-styles .tedi-cell--align-right{text-align:right}.tedi-table-styles .tedi-row--secondary{background-color:var(--_table-stripe)}.tedi-table-styles .tedi-table-scroll{overflow-x:auto}.tedi-table-styles--striped tbody tr:nth-child(2n){background-color:var(--_table-stripe)}.tedi-table-styles--clickable tbody tr:hover{cursor:pointer;background-color:var(--_table-hover)}.tedi-table-styles--vertical-borders :is(th,td):not(:last-child){border-right:1px solid var(--_table-border)}.tedi-table-styles--sm{--_table-header-padding-y: var(--table-header-padding-y-sm) --_table-header-padding-x: var(--table-header-padding-x-sm);--_table-data-padding-y: var(--table-data-padding-y-sm);--_table-data-padding-x: var(--table-data-padding-x-sm)}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3331
3336
|
}
|
|
3332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableStylesComponent, decorators: [{
|
|
3333
3338
|
type: Component,
|
|
3334
3339
|
args: [{ selector: "tedi-table-styles", imports: [CdkScrollable], host: {
|
|
3335
3340
|
"[class.tedi-table-styles]": "true",
|
|
@@ -3338,31 +3343,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3338
3343
|
"[class.tedi-table-styles--clickable]": "clickable()",
|
|
3339
3344
|
"[class.tedi-table-styles--sm]": "size() === 'small'",
|
|
3340
3345
|
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-table-scroll\" cdkScrollable>\n <ng-content />\n</div>\n<ng-content select=\"tedi-pagination, [tedi-table-pagination]\" />\n", styles: [".tedi-table-styles{--_table-bg: var(--table-default);--_table-border: var(--table-border);--_table-contrast-border: var(--table-border-th);--_table-stripe: var(--table-striped);--_table-hover: var(--table-hover);--_table-color: var(--general-text-primary);--_table-header-color: var(--general-text-tertiary);--_table-radius: var(--table-radius);--_table-header-padding-y: var(--table-header-padding-y);--_table-header-padding-x: var(--table-header-padding-x);--_table-data-padding-y: var(--table-data-padding-y);--_table-data-padding-x: var(--table-data-padding-x);display:block;background:var(--_table-bg);border-radius:var(--_table-radius);border:1px solid var(--_table-border);overflow:hidden}.tedi-table-styles table{border-collapse:collapse;border-spacing:0;vertical-align:middle;width:100%;position:relative}.tedi-table-styles th,.tedi-table-styles td{text-align:left;font-family:var(--family-default);font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height)}.tedi-table-styles th{padding:var(--_table-header-padding-y) var(--_table-header-padding-x);border-bottom:1px solid var(--_table-contrast-border);color:var(--_table-header-color)}.tedi-table-styles td{padding:var(--_table-data-padding-y) var(--_table-data-padding-x);border-bottom:1px solid var(--_table-border);color:var(--_table-color)}.tedi-table-styles tr:last-child td{border-bottom:none}.tedi-table-styles .tedi-cell--align-center{text-align:center}.tedi-table-styles .tedi-cell--align-right{text-align:right}.tedi-table-styles .tedi-row--secondary{background-color:var(--_table-stripe)}.tedi-table-styles .tedi-table-scroll{overflow-x:auto}.tedi-table-styles--striped tbody tr:nth-child(2n){background-color:var(--_table-stripe)}.tedi-table-styles--clickable tbody tr:hover{cursor:pointer;background-color:var(--_table-hover)}.tedi-table-styles--vertical-borders :is(th,td):not(:last-child){border-right:1px solid var(--_table-border)}.tedi-table-styles--sm{--_table-header-padding-y: var(--table-header-padding-y-sm) --_table-header-padding-x: var(--table-header-padding-x-sm);--_table-data-padding-y: var(--table-data-padding-y-sm);--_table-data-padding-x: var(--table-data-padding-x-sm)}\n"] }]
|
|
3341
|
-
}] });
|
|
3346
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
|
|
3342
3347
|
|
|
3348
|
+
/**
|
|
3349
|
+
* @deprecated Use the TEDI-Ready `ProgressBarComponent` from
|
|
3350
|
+
* `@tedi-design-system/angular/tedi` instead. Same selector, but the API
|
|
3351
|
+
* differs: the `feedbackText` input is gone — project a
|
|
3352
|
+
* `<tedi-feedback-text>` child instead — and `small` is replaced by
|
|
3353
|
+
* `size: "default" | "small"`. The TEDI-Ready version also adds
|
|
3354
|
+
* `label`, `labelPosition`, `required`, `showValue`, `valuePosition`,
|
|
3355
|
+
* `valueLabel`, `ariaLabel`, `mobile`, and `mobileBreakpoint`. The CSS host
|
|
3356
|
+
* class is renamed from `.tedi-progress` to `.tedi-progress-bar`.
|
|
3357
|
+
*/
|
|
3343
3358
|
class ProgressBarComponent {
|
|
3344
|
-
progressId = input();
|
|
3345
|
-
value = input(0);
|
|
3346
|
-
direction = input("horizontal");
|
|
3347
|
-
small = input(false, { transform: booleanAttribute });
|
|
3348
|
-
feedbackText = input();
|
|
3359
|
+
progressId = input(...(ngDevMode ? [undefined, { debugName: "progressId" }] : []));
|
|
3360
|
+
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
3361
|
+
direction = input("horizontal", ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
3362
|
+
small = input(false, ...(ngDevMode ? [{ debugName: "small", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
3363
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
3349
3364
|
feedbackTextId = computed(() => {
|
|
3350
3365
|
if (this.feedbackText()) {
|
|
3351
3366
|
return generateUUID();
|
|
3352
3367
|
}
|
|
3353
3368
|
return;
|
|
3354
|
-
});
|
|
3355
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3369
|
+
}, ...(ngDevMode ? [{ debugName: "feedbackTextId" }] : []));
|
|
3370
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress": "true", "class.tedi-progress--small": "small()", "class.tedi-progress--horizontal": "direction() === 'horizontal'" } }, ngImport: i0, template: "<progress\n class=\"tedi-progress__bar\"\n [id]=\"progressId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n></progress>\n\n<span tedi-label size=\"small\" class=\"tedi-progress__indicator\"\n >{{ value() }}%</span\n>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-progress{--_bar-height: var(--progress-bar-height, 8px);--_bar-radius: var(--progress-bar-radius, 4px);--_bar-background: var(--progress-bar-background-passive, #f9f9f9);--_bar-border: var(--progress-bar-border-default, #838494);--_progress-background: var(--progress-bar-background-active, #005aa3);display:grid;grid-template-areas:\"bar bar\" \". indicator\";grid-template-rows:24px;grid-template-columns:1fr auto;column-gap:var(--layout-grid-gutters-08, 8px)}.tedi-progress__bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-area:bar;height:var(--_bar-height);border-radius:var(--_bar-radius);border:1px solid var(--_bar-border);width:100%;align-self:center}.tedi-progress__bar::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__indicator{grid-area:indicator}.tedi-progress--small{--_bar-height: var(--progress-bar-height-sm, 4px)}@media(min-width:36rem){.tedi-progress--horizontal{grid-template-areas:\"bar indicator\"}}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3357
3372
|
}
|
|
3358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
3359
3374
|
type: Component,
|
|
3360
3375
|
args: [{ selector: "tedi-progress-bar", imports: [FeedbackTextComponent, LabelComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3361
3376
|
"[class.tedi-progress]": "true",
|
|
3362
3377
|
"[class.tedi-progress--small]": "small()",
|
|
3363
3378
|
"[class.tedi-progress--horizontal]": "direction() === 'horizontal'",
|
|
3364
|
-
}, template: "<progress\n class=\"tedi-progress__bar\"\n [id]=\"progressId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n></progress>\n\n<span tedi-label size=\"small\" class=\"tedi-progress__indicator\"\n >{{ value() }}%</span\n>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-progress{--_bar-height: var(--progress-bar-height, 8px);--_bar-radius: var(--progress-bar-radius, 4px);--_bar-background: var(--progress-bar-background-passive, #f9f9f9);--_bar-border: var(--progress-bar-border-default, #838494);--_progress-background: var(--progress-bar-background-active, #005aa3);display:grid;grid-template-areas:\"bar bar\" \". indicator\";grid-template-rows:24px;grid-template-columns:1fr auto;column-gap:var(--layout-grid-gutters-08, 8px)}.tedi-progress__bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-area:bar;height:var(--_bar-height);border-radius:var(--_bar-radius);border:1px solid var(--_bar-border);width:100%;align-self:center}.tedi-progress__bar::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__indicator{grid-area:indicator}.tedi-progress--small{--_bar-height: var(--progress-bar-height-sm, 4px)}@media
|
|
3365
|
-
}] });
|
|
3379
|
+
}, template: "<progress\n class=\"tedi-progress__bar\"\n [id]=\"progressId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n></progress>\n\n<span tedi-label size=\"small\" class=\"tedi-progress__indicator\"\n >{{ value() }}%</span\n>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-progress{--_bar-height: var(--progress-bar-height, 8px);--_bar-radius: var(--progress-bar-radius, 4px);--_bar-background: var(--progress-bar-background-passive, #f9f9f9);--_bar-border: var(--progress-bar-border-default, #838494);--_progress-background: var(--progress-bar-background-active, #005aa3);display:grid;grid-template-areas:\"bar bar\" \". indicator\";grid-template-rows:24px;grid-template-columns:1fr auto;column-gap:var(--layout-grid-gutters-08, 8px)}.tedi-progress__bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-area:bar;height:var(--_bar-height);border-radius:var(--_bar-radius);border:1px solid var(--_bar-border);width:100%;align-self:center}.tedi-progress__bar::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__indicator{grid-area:indicator}.tedi-progress--small{--_bar-height: var(--progress-bar-height-sm, 4px)}@media(min-width:36rem){.tedi-progress--horizontal{grid-template-areas:\"bar indicator\"}}\n"] }]
|
|
3380
|
+
}], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }] } });
|
|
3366
3381
|
|
|
3367
3382
|
/**
|
|
3368
3383
|
* Generated bundle index. Do not edit.
|