@fundamental-ngx/ui5-webcomponents 0.65.1-rc.9 → 0.65.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/fesm2022/fundamental-ngx-ui5-webcomponents-utils.mjs +3 -3
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs +387 -387
- package/package.json +3 -519
- package/types/fundamental-ngx-ui5-webcomponents.d.ts +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-badge.mjs +0 -122
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-badge.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs +0 -191
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs +0 -261
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs +0 -143
- package/fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs-item.mjs +0 -162
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs +0 -151
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-busy-indicator.mjs +0 -130
- package/fesm2022/fundamental-ngx-ui5-webcomponents-busy-indicator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-button-badge.mjs +0 -95
- package/fesm2022/fundamental-ngx-ui5-webcomponents-button-badge.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-button.mjs +0 -266
- package/fesm2022/fundamental-ngx-ui5-webcomponents-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-date-range.mjs +0 -90
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-date-range.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-date.mjs +0 -83
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-date.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-legend-item.mjs +0 -88
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-legend-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-legend.mjs +0 -121
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar-legend.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar.mjs +0 -224
- package/fesm2022/fundamental-ngx-ui5-webcomponents-calendar.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card-header.mjs +0 -156
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card-header.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card.mjs +0 -134
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-carousel.mjs +0 -218
- package/fesm2022/fundamental-ngx-ui5-webcomponents-carousel.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-check-box.mjs +0 -227
- package/fesm2022/fundamental-ngx-ui5-webcomponents-check-box.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-item.mjs +0 -124
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-popover.mjs +0 -184
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-popover.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette.mjs +0 -137
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-palette.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-picker.mjs +0 -133
- package/fesm2022/fundamental-ngx-ui5-webcomponents-color-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs +0 -141
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-group.mjs +0 -169
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item.mjs +0 -138
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box.mjs +0 -287
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-picker.mjs +0 -329
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-range-picker.mjs +0 -367
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-range-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-input.mjs +0 -321
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-input.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-picker.mjs +0 -329
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-day-picker.mjs +0 -131
- package/fesm2022/fundamental-ngx-ui5-webcomponents-day-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dialog.mjs +0 -267
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dialog.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-drop-indicator.mjs +0 -100
- package/fesm2022/fundamental-ngx-ui5-webcomponents-drop-indicator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs +0 -119
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-expandable-text.mjs +0 -100
- package/fesm2022/fundamental-ngx-ui5-webcomponents-expandable-text.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-file-uploader.mjs +0 -287
- package/fesm2022/fundamental-ngx-ui5-webcomponents-file-uploader.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form-group.mjs +0 -143
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form-item.mjs +0 -118
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form.mjs +0 -202
- package/fesm2022/fundamental-ngx-ui5-webcomponents-form.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-icon.mjs +0 -197
- package/fesm2022/fundamental-ngx-ui5-webcomponents-icon.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs +0 -117
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input.mjs +0 -321
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-label.mjs +0 -135
- package/fesm2022/fundamental-ngx-ui5-webcomponents-label.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-link.mjs +0 -261
- package/fesm2022/fundamental-ngx-ui5-webcomponents-link.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-custom.mjs +0 -216
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-group-header.mjs +0 -153
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-group-header.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-group.mjs +0 -169
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-standard.mjs +0 -289
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list-item-standard.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list.mjs +0 -322
- package/fesm2022/fundamental-ngx-ui5-webcomponents-list.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-item-group.mjs +0 -108
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-item-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-item.mjs +0 -320
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs +0 -52
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu.mjs +0 -193
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-message-strip.mjs +0 -165
- package/fesm2022/fundamental-ngx-ui5-webcomponents-message-strip.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-month-picker.mjs +0 -131
- package/fesm2022/fundamental-ngx-ui5-webcomponents-month-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs +0 -141
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-group.mjs +0 -169
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item.mjs +0 -129
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box.mjs +0 -306
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-input.mjs +0 -345
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-input.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-number-input.mjs +0 -208
- package/fesm2022/fundamental-ngx-ui5-webcomponents-number-input.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option-custom.mjs +0 -152
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option-group.mjs +0 -109
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option.mjs +0 -163
- package/fesm2022/fundamental-ngx-ui5-webcomponents-option.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-panel.mjs +0 -186
- package/fesm2022/fundamental-ngx-ui5-webcomponents-panel.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-popover.mjs +0 -263
- package/fesm2022/fundamental-ngx-ui5-webcomponents-popover.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-progress-indicator.mjs +0 -113
- package/fesm2022/fundamental-ngx-ui5-webcomponents-progress-indicator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-radio-button.mjs +0 -205
- package/fesm2022/fundamental-ngx-ui5-webcomponents-radio-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-range-slider.mjs +0 -226
- package/fesm2022/fundamental-ngx-ui5-webcomponents-range-slider.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-rating-indicator.mjs +0 -182
- package/fesm2022/fundamental-ngx-ui5-webcomponents-rating-indicator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-responsive-popover.mjs +0 -263
- package/fesm2022/fundamental-ngx-ui5-webcomponents-responsive-popover.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button-item.mjs +0 -183
- package/fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button.mjs +0 -199
- package/fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-select.mjs +0 -317
- package/fesm2022/fundamental-ngx-ui5-webcomponents-select.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider-handle.mjs +0 -52
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider-handle.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider-tooltip.mjs +0 -52
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider-tooltip.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider.mjs +0 -220
- package/fesm2022/fundamental-ngx-ui5-webcomponents-slider.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-special-calendar-date.mjs +0 -89
- package/fesm2022/fundamental-ngx-ui5-webcomponents-special-calendar-date.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-split-button.mjs +0 -187
- package/fesm2022/fundamental-ngx-ui5-webcomponents-split-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-step-input.mjs +0 -213
- package/fesm2022/fundamental-ngx-ui5-webcomponents-step-input.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item-custom.mjs +0 -134
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item-group.mjs +0 -169
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item-group.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item.mjs +0 -114
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-list-item.mjs +0 -289
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-list-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-switch.mjs +0 -212
- package/fesm2022/fundamental-ngx-ui5-webcomponents-switch.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-container.mjs +0 -209
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-container.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-separator.mjs +0 -52
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-separator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab.mjs +0 -183
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-cell.mjs +0 -116
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-cell.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-group-row.mjs +0 -140
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-group-row.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-growing.mjs +0 -130
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-growing.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-cell-action-a-i.mjs +0 -76
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-cell-action-a-i.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-cell.mjs +0 -172
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-cell.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-row.mjs +0 -110
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-header-row.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row-action-navigation.mjs +0 -112
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row-action-navigation.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row-action.mjs +0 -126
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row-action.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row.mjs +0 -140
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-row.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection-multi.mjs +0 -118
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection-multi.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection-single.mjs +0 -112
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection-single.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection.mjs +0 -112
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-selection.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-virtualizer.mjs +0 -124
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table-virtualizer.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table.mjs +0 -229
- package/fesm2022/fundamental-ngx-ui5-webcomponents-table.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tag.mjs +0 -173
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tag.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text-area.mjs +0 -281
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text-area.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text.mjs +0 -113
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming-bridge.mjs +0 -16
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming-bridge.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming.mjs +0 -23
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker-clock.mjs +0 -52
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker-clock.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker.mjs +0 -270
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-selection-clocks.mjs +0 -93
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-selection-clocks.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-selection-inputs.mjs +0 -93
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-selection-inputs.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-title.mjs +0 -128
- package/fesm2022/fundamental-ngx-ui5-webcomponents-title.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toast.mjs +0 -148
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toast.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toggle-button.mjs +0 -271
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toggle-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toggle-spin-button.mjs +0 -271
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toggle-spin-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-token.mjs +0 -114
- package/fesm2022/fundamental-ngx-ui5-webcomponents-token.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tokenizer.mjs +0 -181
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tokenizer.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-button.mjs +0 -251
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-button.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-item.mjs +0 -137
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs +0 -114
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select.mjs +0 -221
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-separator.mjs +0 -111
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-separator.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-spacer.mjs +0 -119
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-spacer.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar.mjs +0 -143
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree-item-custom.mjs +0 -279
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree-item-custom.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree-item.mjs +0 -281
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree-item.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree.mjs +0 -233
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tree.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-year-picker.mjs +0 -131
- package/fesm2022/fundamental-ngx-ui5-webcomponents-year-picker.mjs.map +0 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-year-range-picker.mjs +0 -131
- package/fesm2022/fundamental-ngx-ui5-webcomponents-year-range-picker.mjs.map +0 -1
- package/types/fundamental-ngx-ui5-webcomponents-avatar-badge.d.ts +0 -58
- package/types/fundamental-ngx-ui5-webcomponents-avatar-group.d.ts +0 -104
- package/types/fundamental-ngx-ui5-webcomponents-avatar.d.ts +0 -161
- package/types/fundamental-ngx-ui5-webcomponents-bar.d.ts +0 -69
- package/types/fundamental-ngx-ui5-webcomponents-breadcrumbs-item.d.ts +0 -78
- package/types/fundamental-ngx-ui5-webcomponents-breadcrumbs.d.ts +0 -69
- package/types/fundamental-ngx-ui5-webcomponents-busy-indicator.d.ts +0 -63
- package/types/fundamental-ngx-ui5-webcomponents-button-badge.d.ts +0 -35
- package/types/fundamental-ngx-ui5-webcomponents-button.d.ts +0 -164
- package/types/fundamental-ngx-ui5-webcomponents-calendar-date-range.d.ts +0 -30
- package/types/fundamental-ngx-ui5-webcomponents-calendar-date.d.ts +0 -25
- package/types/fundamental-ngx-ui5-webcomponents-calendar-legend-item.d.ts +0 -28
- package/types/fundamental-ngx-ui5-webcomponents-calendar-legend.d.ts +0 -59
- package/types/fundamental-ngx-ui5-webcomponents-calendar.d.ts +0 -119
- package/types/fundamental-ngx-ui5-webcomponents-card-header.d.ts +0 -69
- package/types/fundamental-ngx-ui5-webcomponents-card.d.ts +0 -69
- package/types/fundamental-ngx-ui5-webcomponents-carousel.d.ts +0 -121
- package/types/fundamental-ngx-ui5-webcomponents-check-box.d.ts +0 -115
- package/types/fundamental-ngx-ui5-webcomponents-color-palette-item.d.ts +0 -45
- package/types/fundamental-ngx-ui5-webcomponents-color-palette-popover.d.ts +0 -93
- package/types/fundamental-ngx-ui5-webcomponents-color-palette.d.ts +0 -57
- package/types/fundamental-ngx-ui5-webcomponents-color-picker.d.ts +0 -50
- package/types/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.d.ts +0 -61
- package/types/fundamental-ngx-ui5-webcomponents-combo-box-item-group.d.ts +0 -82
- package/types/fundamental-ngx-ui5-webcomponents-combo-box-item.d.ts +0 -58
- package/types/fundamental-ngx-ui5-webcomponents-combo-box.d.ts +0 -161
- package/types/fundamental-ngx-ui5-webcomponents-date-picker.d.ts +0 -189
- package/types/fundamental-ngx-ui5-webcomponents-date-range-picker.d.ts +0 -218
- package/types/fundamental-ngx-ui5-webcomponents-date-time-input.d.ts +0 -189
- package/types/fundamental-ngx-ui5-webcomponents-date-time-picker.d.ts +0 -189
- package/types/fundamental-ngx-ui5-webcomponents-day-picker.d.ts +0 -59
- package/types/fundamental-ngx-ui5-webcomponents-dialog.d.ts +0 -157
- package/types/fundamental-ngx-ui5-webcomponents-drop-indicator.d.ts +0 -36
- package/types/fundamental-ngx-ui5-webcomponents-dynamic-date-range.d.ts +0 -40
- package/types/fundamental-ngx-ui5-webcomponents-expandable-text.d.ts +0 -36
- package/types/fundamental-ngx-ui5-webcomponents-file-uploader.d.ts +0 -143
- package/types/fundamental-ngx-ui5-webcomponents-form-group.d.ts +0 -73
- package/types/fundamental-ngx-ui5-webcomponents-form-item.d.ts +0 -54
- package/types/fundamental-ngx-ui5-webcomponents-form.d.ts +0 -122
- package/types/fundamental-ngx-ui5-webcomponents-icon.d.ts +0 -112
- package/types/fundamental-ngx-ui5-webcomponents-input-icon.d.ts +0 -39
- package/types/fundamental-ngx-ui5-webcomponents-input.d.ts +0 -189
- package/types/fundamental-ngx-ui5-webcomponents-label.d.ts +0 -71
- package/types/fundamental-ngx-ui5-webcomponents-link.d.ts +0 -157
- package/types/fundamental-ngx-ui5-webcomponents-list-item-custom.d.ts +0 -125
- package/types/fundamental-ngx-ui5-webcomponents-list-item-group-header.d.ts +0 -73
- package/types/fundamental-ngx-ui5-webcomponents-list-item-group.d.ts +0 -82
- package/types/fundamental-ngx-ui5-webcomponents-list-item-standard.d.ts +0 -180
- package/types/fundamental-ngx-ui5-webcomponents-list.d.ts +0 -204
- package/types/fundamental-ngx-ui5-webcomponents-menu-item-group.d.ts +0 -48
- package/types/fundamental-ngx-ui5-webcomponents-menu-item.d.ts +0 -209
- package/types/fundamental-ngx-ui5-webcomponents-menu-separator.d.ts +0 -20
- package/types/fundamental-ngx-ui5-webcomponents-menu.d.ts +0 -101
- package/types/fundamental-ngx-ui5-webcomponents-message-strip.d.ts +0 -79
- package/types/fundamental-ngx-ui5-webcomponents-month-picker.d.ts +0 -59
- package/types/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.d.ts +0 -61
- package/types/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-group.d.ts +0 -82
- package/types/fundamental-ngx-ui5-webcomponents-multi-combo-box-item.d.ts +0 -48
- package/types/fundamental-ngx-ui5-webcomponents-multi-combo-box.d.ts +0 -177
- package/types/fundamental-ngx-ui5-webcomponents-multi-input.d.ts +0 -206
- package/types/fundamental-ngx-ui5-webcomponents-number-input.d.ts +0 -110
- package/types/fundamental-ngx-ui5-webcomponents-option-custom.d.ts +0 -69
- package/types/fundamental-ngx-ui5-webcomponents-option-group.d.ts +0 -49
- package/types/fundamental-ngx-ui5-webcomponents-option.d.ts +0 -78
- package/types/fundamental-ngx-ui5-webcomponents-panel.d.ts +0 -94
- package/types/fundamental-ngx-ui5-webcomponents-popover.d.ts +0 -147
- package/types/fundamental-ngx-ui5-webcomponents-progress-indicator.d.ts +0 -48
- package/types/fundamental-ngx-ui5-webcomponents-radio-button.d.ts +0 -95
- package/types/fundamental-ngx-ui5-webcomponents-range-slider.d.ts +0 -112
- package/types/fundamental-ngx-ui5-webcomponents-rating-indicator.d.ts +0 -88
- package/types/fundamental-ngx-ui5-webcomponents-responsive-popover.d.ts +0 -147
- package/types/fundamental-ngx-ui5-webcomponents-segmented-button-item.d.ts +0 -93
- package/types/fundamental-ngx-ui5-webcomponents-segmented-button.d.ts +0 -88
- package/types/fundamental-ngx-ui5-webcomponents-select.d.ts +0 -163
- package/types/fundamental-ngx-ui5-webcomponents-slider-handle.d.ts +0 -20
- package/types/fundamental-ngx-ui5-webcomponents-slider-tooltip.d.ts +0 -20
- package/types/fundamental-ngx-ui5-webcomponents-slider.d.ts +0 -108
- package/types/fundamental-ngx-ui5-webcomponents-special-calendar-date.d.ts +0 -29
- package/types/fundamental-ngx-ui5-webcomponents-split-button.d.ts +0 -101
- package/types/fundamental-ngx-ui5-webcomponents-step-input.d.ts +0 -112
- package/types/fundamental-ngx-ui5-webcomponents-suggestion-item-custom.d.ts +0 -56
- package/types/fundamental-ngx-ui5-webcomponents-suggestion-item-group.d.ts +0 -82
- package/types/fundamental-ngx-ui5-webcomponents-suggestion-item.d.ts +0 -36
- package/types/fundamental-ngx-ui5-webcomponents-suggestion-list-item.d.ts +0 -175
- package/types/fundamental-ngx-ui5-webcomponents-switch.d.ts +0 -100
- package/types/fundamental-ngx-ui5-webcomponents-tab-container.d.ts +0 -115
- package/types/fundamental-ngx-ui5-webcomponents-tab-separator.d.ts +0 -20
- package/types/fundamental-ngx-ui5-webcomponents-tab.d.ts +0 -92
- package/types/fundamental-ngx-ui5-webcomponents-table-cell.d.ts +0 -55
- package/types/fundamental-ngx-ui5-webcomponents-table-group-row.d.ts +0 -75
- package/types/fundamental-ngx-ui5-webcomponents-table-growing.d.ts +0 -50
- package/types/fundamental-ngx-ui5-webcomponents-table-header-cell-action-a-i.d.ts +0 -26
- package/types/fundamental-ngx-ui5-webcomponents-table-header-cell.d.ts +0 -101
- package/types/fundamental-ngx-ui5-webcomponents-table-header-row.d.ts +0 -51
- package/types/fundamental-ngx-ui5-webcomponents-table-row-action-navigation.d.ts +0 -36
- package/types/fundamental-ngx-ui5-webcomponents-table-row-action.d.ts +0 -47
- package/types/fundamental-ngx-ui5-webcomponents-table-row.d.ts +0 -75
- package/types/fundamental-ngx-ui5-webcomponents-table-selection-multi.d.ts +0 -38
- package/types/fundamental-ngx-ui5-webcomponents-table-selection-single.d.ts +0 -34
- package/types/fundamental-ngx-ui5-webcomponents-table-selection.d.ts +0 -34
- package/types/fundamental-ngx-ui5-webcomponents-table-virtualizer.d.ts +0 -44
- package/types/fundamental-ngx-ui5-webcomponents-table.d.ts +0 -124
- package/types/fundamental-ngx-ui5-webcomponents-tag.d.ts +0 -83
- package/types/fundamental-ngx-ui5-webcomponents-text-area.d.ts +0 -157
- package/types/fundamental-ngx-ui5-webcomponents-text.d.ts +0 -51
- package/types/fundamental-ngx-ui5-webcomponents-theming-bridge.d.ts +0 -6
- package/types/fundamental-ngx-ui5-webcomponents-theming.d.ts +0 -11
- package/types/fundamental-ngx-ui5-webcomponents-time-picker-clock.d.ts +0 -20
- package/types/fundamental-ngx-ui5-webcomponents-time-picker.d.ts +0 -145
- package/types/fundamental-ngx-ui5-webcomponents-time-selection-clocks.d.ts +0 -33
- package/types/fundamental-ngx-ui5-webcomponents-time-selection-inputs.d.ts +0 -33
- package/types/fundamental-ngx-ui5-webcomponents-title.d.ts +0 -64
- package/types/fundamental-ngx-ui5-webcomponents-toast.d.ts +0 -67
- package/types/fundamental-ngx-ui5-webcomponents-toggle-button.d.ts +0 -168
- package/types/fundamental-ngx-ui5-webcomponents-toggle-spin-button.d.ts +0 -168
- package/types/fundamental-ngx-ui5-webcomponents-token.d.ts +0 -53
- package/types/fundamental-ngx-ui5-webcomponents-tokenizer.d.ts +0 -94
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-button.d.ts +0 -150
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-item.d.ts +0 -74
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-select-option.d.ts +0 -53
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-select.d.ts +0 -127
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-separator.d.ts +0 -50
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-spacer.d.ts +0 -56
- package/types/fundamental-ngx-ui5-webcomponents-toolbar.d.ts +0 -75
- package/types/fundamental-ngx-ui5-webcomponents-tree-item-custom.d.ts +0 -171
- package/types/fundamental-ngx-ui5-webcomponents-tree-item.d.ts +0 -174
- package/types/fundamental-ngx-ui5-webcomponents-tree.d.ts +0 -130
- package/types/fundamental-ngx-ui5-webcomponents-year-picker.d.ts +0 -59
- package/types/fundamental-ngx-ui5-webcomponents-year-range-picker.d.ts +0 -59
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import '@ui5/webcomponents/dist/AvatarBadge.js';
|
|
4
|
-
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
-
|
|
6
|
-
class AvatarBadge {
|
|
7
|
-
constructor() {
|
|
8
|
-
/**
|
|
9
|
-
* Defines the color scheme of the badge using the indication color palette.
|
|
10
|
-
|
|
11
|
-
Available options are `"1"` through `"10"`, matching the indication colors.
|
|
12
|
-
|
|
13
|
-
**Note:** `state` takes precedence - when `state` is set to any value other than `None`,
|
|
14
|
-
the semantic state styling applies and `colorScheme` is ignored.
|
|
15
|
-
*/
|
|
16
|
-
this.colorScheme = input(/* @ts-ignore */
|
|
17
|
-
...(ngDevMode ? [undefined, { debugName: "colorScheme" }] : /* istanbul ignore next */ []));
|
|
18
|
-
/**
|
|
19
|
-
* Defines the icon name to be displayed inside the badge.
|
|
20
|
-
|
|
21
|
-
**Note:** You should import the desired icon first, then use its name as "icon".
|
|
22
|
-
|
|
23
|
-
`import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
|
|
24
|
-
*/
|
|
25
|
-
this.icon = input(/* @ts-ignore */
|
|
26
|
-
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
27
|
-
/**
|
|
28
|
-
* Defines the state of the badge, which determines its styling.
|
|
29
|
-
|
|
30
|
-
Available options:
|
|
31
|
-
- `None` (default) - Standard appearance
|
|
32
|
-
- `Positive` - Green, used for success/approved states
|
|
33
|
-
- `Critical` - Orange, used for warning states
|
|
34
|
-
- `Negative` - Red, used for error/rejected states
|
|
35
|
-
- `Information` - Blue, used for informational states
|
|
36
|
-
|
|
37
|
-
**Note:** `state` takes precedence over `colorScheme`. When `state` is set
|
|
38
|
-
to any value other than `None`, the semantic styling applies and `colorScheme` is ignored.
|
|
39
|
-
*/
|
|
40
|
-
this.state = input("None", /* @ts-ignore */
|
|
41
|
-
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
42
|
-
/**
|
|
43
|
-
* Defines the tooltip text of the badge icon.
|
|
44
|
-
|
|
45
|
-
**Note:** If not provided, the badge uses the icon accessible name.
|
|
46
|
-
If no icon accessible name is available, a generic fallback text is used.
|
|
47
|
-
*/
|
|
48
|
-
this.tooltip = input(/* @ts-ignore */
|
|
49
|
-
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ [])); // className is now passed
|
|
50
|
-
this.elementRef = inject(ElementRef);
|
|
51
|
-
this.injector = inject(Injector);
|
|
52
|
-
/**
|
|
53
|
-
* Content density observer is injected to activate automatic CSS class and
|
|
54
|
-
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
55
|
-
* @private
|
|
56
|
-
*/
|
|
57
|
-
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
58
|
-
}
|
|
59
|
-
get element() {
|
|
60
|
-
return this.elementRef.nativeElement;
|
|
61
|
-
}
|
|
62
|
-
ngAfterViewInit() {
|
|
63
|
-
const wcElement = this.element;
|
|
64
|
-
const inputsToSync = [
|
|
65
|
-
'colorScheme',
|
|
66
|
-
'icon',
|
|
67
|
-
'state',
|
|
68
|
-
'tooltip',
|
|
69
|
-
];
|
|
70
|
-
// Synchronize inputs (properties)
|
|
71
|
-
for (const inputName of inputsToSync) {
|
|
72
|
-
// Find the corresponding camelCase signal property on the Angular component
|
|
73
|
-
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
74
|
-
// Use the Injector to run the effect in the correct context
|
|
75
|
-
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
76
|
-
runInInjectionContext(this.injector, () => {
|
|
77
|
-
effect(() => {
|
|
78
|
-
// Read the signal value
|
|
79
|
-
const value = this[signalName]();
|
|
80
|
-
if (wcElement) {
|
|
81
|
-
// Skip writes when the signal is undefined and the property is already truthy
|
|
82
|
-
// This prevents clobbering imperatively-set values (e.g., from RouterLink)
|
|
83
|
-
if (value === undefined && wcElement[inputName]) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
// Write the value to the Web Component's property
|
|
87
|
-
wcElement[inputName] = value;
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: AvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: AvatarBadge, isStandalone: true, selector: "ui5-avatar-badge, [ui5-avatar-badge]", inputs: { colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
96
|
-
contentDensityObserverProviders({
|
|
97
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
98
|
-
})
|
|
99
|
-
], exportAs: ["ui5AvatarBadge"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
|
-
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: AvatarBadge, decorators: [{
|
|
102
|
-
type: Component,
|
|
103
|
-
args: [{
|
|
104
|
-
standalone: true,
|
|
105
|
-
selector: 'ui5-avatar-badge, [ui5-avatar-badge]',
|
|
106
|
-
template: '<ng-content></ng-content>',
|
|
107
|
-
exportAs: 'ui5AvatarBadge',
|
|
108
|
-
providers: [
|
|
109
|
-
contentDensityObserverProviders({
|
|
110
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
111
|
-
})
|
|
112
|
-
],
|
|
113
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
114
|
-
}]
|
|
115
|
-
}], propDecorators: { colorScheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScheme", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Generated bundle index. Do not edit.
|
|
119
|
-
*/
|
|
120
|
-
|
|
121
|
-
export { AvatarBadge };
|
|
122
|
-
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-avatar-badge.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-badge.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-badge/index.ts","../../../../libs/ui5-webcomponents/avatar-badge/fundamental-ngx-ui5-webcomponents-avatar-badge.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { default as _AvatarBadge } from '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar-badge, [ui5-avatar-badge]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5AvatarBadge',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarBadge implements AfterViewInit {\n\n /**\n * Defines the color scheme of the badge using the indication color palette.\n\nAvailable options are `\"1\"` through `\"10\"`, matching the indication colors.\n\n**Note:** `state` takes precedence - when `state` is set to any value other than `None`,\nthe semantic state styling applies and `colorScheme` is ignored.\n */\n colorScheme = input<typeof _AvatarBadge.prototype.colorScheme | undefined>();\n\n /**\n * Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n */\n icon = input<typeof _AvatarBadge.prototype.icon | undefined>();\n\n /**\n * Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states\n\n**Note:** `state` takes precedence over `colorScheme`. When `state` is set\nto any value other than `None`, the semantic styling applies and `colorScheme` is ignored.\n */\n state = input<typeof _AvatarBadge.prototype.state | undefined>(\"None\");\n\n /**\n * Defines the tooltip text of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.\n */\n tooltip = input<typeof _AvatarBadge.prototype.tooltip | undefined>(); // className is now passed\n\n\n\n\n\n public elementRef: ElementRef<_AvatarBadge> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n get element(): _AvatarBadge {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'colorScheme',\n 'icon',\n 'state',\n 'tooltip',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, inject, ElementRef, Injector, DestroyRef, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import '@ui5/webcomponents/dist/AvatarGroup.js';
|
|
4
|
-
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
-
|
|
6
|
-
class AvatarGroup {
|
|
7
|
-
constructor() {
|
|
8
|
-
/**
|
|
9
|
-
* Defines the additional accessibility attributes that will be applied to the component.
|
|
10
|
-
The following field is supported:
|
|
11
|
-
|
|
12
|
-
- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
|
|
13
|
-
Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
|
|
14
|
-
*/
|
|
15
|
-
this.accessibilityAttributes = input({}, /* @ts-ignore */
|
|
16
|
-
...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : /* istanbul ignore next */ []));
|
|
17
|
-
/**
|
|
18
|
-
* Defines the accessible name of the AvatarGroup.
|
|
19
|
-
When provided, this will override the default aria-label text.
|
|
20
|
-
*/
|
|
21
|
-
this.accessibleName = input(/* @ts-ignore */
|
|
22
|
-
...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : /* istanbul ignore next */ []));
|
|
23
|
-
/**
|
|
24
|
-
* Receives id(s) of the elements that describe the AvatarGroup.
|
|
25
|
-
When provided, this will be used as aria-labelledby instead of aria-label.
|
|
26
|
-
*/
|
|
27
|
-
this.accessibleNameRef = input(/* @ts-ignore */
|
|
28
|
-
...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : /* istanbul ignore next */ []));
|
|
29
|
-
/**
|
|
30
|
-
* Defines the mode of the `AvatarGroup`.
|
|
31
|
-
*/
|
|
32
|
-
this.type = input("Group", /* @ts-ignore */
|
|
33
|
-
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ [])); // className is now passed
|
|
34
|
-
/**
|
|
35
|
-
* Fired when the component is activated either with a
|
|
36
|
-
click/tap or by using the Enter or Space key.
|
|
37
|
-
*/
|
|
38
|
-
this.ui5Click = output();
|
|
39
|
-
/**
|
|
40
|
-
* Fired when the count of visible `ui5-avatar` elements in the
|
|
41
|
-
component has changed
|
|
42
|
-
*/
|
|
43
|
-
this.ui5Overflow = output();
|
|
44
|
-
/**
|
|
45
|
-
* Available slots for content projection in this component.
|
|
46
|
-
*
|
|
47
|
-
* Slots allow you to insert custom content into predefined areas of the web component.
|
|
48
|
-
* Use the `slot` attribute on child elements to target specific slots.
|
|
49
|
-
*
|
|
50
|
-
* - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.
|
|
51
|
-
|
|
52
|
-
**Note:** The UX guidelines recommends using avatars with "Circle" shape.
|
|
53
|
-
|
|
54
|
-
Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
|
|
55
|
-
as the built-in overflow action has "Circle" shape.
|
|
56
|
-
* - **overflowButton**: Defines the overflow button of the component.
|
|
57
|
-
|
|
58
|
-
**Note:** We recommend using the `ui5-button` component.
|
|
59
|
-
|
|
60
|
-
**Note:** If this slot is not used, the component will display the built-in overflow button.
|
|
61
|
-
*
|
|
62
|
-
* @example
|
|
63
|
-
* ```html
|
|
64
|
-
* <ui5-avatar-group>
|
|
65
|
-
* <div slot="header">Custom header content</div>
|
|
66
|
-
* <p>Default slot content</p>
|
|
67
|
-
* </ui5-avatar-group>
|
|
68
|
-
* ```
|
|
69
|
-
*
|
|
70
|
-
* @readonly
|
|
71
|
-
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
|
|
72
|
-
*/
|
|
73
|
-
this.slots = [
|
|
74
|
-
{
|
|
75
|
-
"name": "default",
|
|
76
|
-
"description": "Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape."
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"name": "overflowButton",
|
|
80
|
-
"description": "Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.",
|
|
81
|
-
"since": "1.0.0-rc.13"
|
|
82
|
-
}
|
|
83
|
-
];
|
|
84
|
-
this.elementRef = inject(ElementRef);
|
|
85
|
-
this.injector = inject(Injector);
|
|
86
|
-
/**
|
|
87
|
-
* Content density observer is injected to activate automatic CSS class and
|
|
88
|
-
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
89
|
-
* @private
|
|
90
|
-
*/
|
|
91
|
-
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
92
|
-
this._destroyRef = inject(DestroyRef);
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.
|
|
96
|
-
* @readonly This property is managed by the web component.
|
|
97
|
-
*/
|
|
98
|
-
get colorScheme() {
|
|
99
|
-
return this.element?.colorScheme ?? [];
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.
|
|
103
|
-
* @readonly This property is managed by the web component.
|
|
104
|
-
*/
|
|
105
|
-
get hiddenItems() {
|
|
106
|
-
return this.element?.hiddenItems ?? [];
|
|
107
|
-
}
|
|
108
|
-
get element() {
|
|
109
|
-
return this.elementRef.nativeElement;
|
|
110
|
-
}
|
|
111
|
-
ngAfterViewInit() {
|
|
112
|
-
const wcElement = this.element;
|
|
113
|
-
const inputsToSync = [
|
|
114
|
-
'accessibilityAttributes',
|
|
115
|
-
'accessibleName',
|
|
116
|
-
'accessibleNameRef',
|
|
117
|
-
'type',
|
|
118
|
-
];
|
|
119
|
-
// Synchronize inputs (properties)
|
|
120
|
-
for (const inputName of inputsToSync) {
|
|
121
|
-
// Find the corresponding camelCase signal property on the Angular component
|
|
122
|
-
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
123
|
-
// Use the Injector to run the effect in the correct context
|
|
124
|
-
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
125
|
-
runInInjectionContext(this.injector, () => {
|
|
126
|
-
effect(() => {
|
|
127
|
-
// Read the signal value
|
|
128
|
-
const value = this[signalName]();
|
|
129
|
-
if (wcElement) {
|
|
130
|
-
// Skip writes when the signal is undefined and the property is already truthy
|
|
131
|
-
// This prevents clobbering imperatively-set values (e.g., from RouterLink)
|
|
132
|
-
if (value === undefined && wcElement[inputName]) {
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
// Write the value to the Web Component's property
|
|
136
|
-
wcElement[inputName] = value;
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
const outputsToSync = [
|
|
143
|
-
'ui5Click',
|
|
144
|
-
'ui5Overflow',
|
|
145
|
-
];
|
|
146
|
-
// Synchronize outputs (events)
|
|
147
|
-
const _listeners = [];
|
|
148
|
-
for (const outputName of outputsToSync) {
|
|
149
|
-
// Map Angular output name to UI5 web component event name
|
|
150
|
-
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
151
|
-
// Ensure the output property exists and has an emit function before adding listener
|
|
152
|
-
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
153
|
-
// Cast the listener to the correct type to satisfy TypeScript
|
|
154
|
-
const listener = (e) => {
|
|
155
|
-
this[outputName].emit(e);
|
|
156
|
-
};
|
|
157
|
-
wcElement.addEventListener(eventName, listener);
|
|
158
|
-
_listeners.push(() => wcElement.removeEventListener(eventName, listener));
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));
|
|
162
|
-
}
|
|
163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: AvatarGroup, isStandalone: true, selector: "ui5-avatar-group, [ui5-avatar-group]", inputs: { accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click", ui5Overflow: "ui5Overflow" }, providers: [
|
|
165
|
-
contentDensityObserverProviders({
|
|
166
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
167
|
-
})
|
|
168
|
-
], exportAs: ["ui5AvatarGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
169
|
-
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: AvatarGroup, decorators: [{
|
|
171
|
-
type: Component,
|
|
172
|
-
args: [{
|
|
173
|
-
standalone: true,
|
|
174
|
-
selector: 'ui5-avatar-group, [ui5-avatar-group]',
|
|
175
|
-
template: '<ng-content></ng-content>',
|
|
176
|
-
exportAs: 'ui5AvatarGroup',
|
|
177
|
-
providers: [
|
|
178
|
-
contentDensityObserverProviders({
|
|
179
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
180
|
-
})
|
|
181
|
-
],
|
|
182
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
183
|
-
}]
|
|
184
|
-
}], propDecorators: { accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }], ui5Overflow: [{ type: i0.Output, args: ["ui5Overflow"] }] } });
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Generated bundle index. Do not edit.
|
|
188
|
-
*/
|
|
189
|
-
|
|
190
|
-
export { AvatarGroup };
|
|
191
|
-
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-avatar-group.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-group.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-group/index.ts","../../../../libs/ui5-webcomponents/avatar-group/fundamental-ngx-ui5-webcomponents-avatar-group.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as _AvatarGroup } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarGroupType } from '@ui5/webcomponents/dist/types/AvatarGroupType.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar-group, [ui5-avatar-group]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5AvatarGroup',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarGroup implements AfterViewInit {\n\n /**\n * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n */\n accessibilityAttributes = input<typeof _AvatarGroup.prototype.accessibilityAttributes | undefined>({});\n\n /**\n * Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.\n */\n accessibleName = input<typeof _AvatarGroup.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.\n */\n accessibleNameRef = input<typeof _AvatarGroup.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines the mode of the `AvatarGroup`.\n */\n type = input<typeof _AvatarGroup.prototype.type | undefined>(\"Group\"); // className is now passed\n\n /**\n * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n * @readonly This property is managed by the web component.\n */\n get colorScheme(): Array<AvatarColorScheme> {\n return this.element?.colorScheme ?? [];\n }\n\n /**\n * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n * @readonly This property is managed by the web component.\n */\n get hiddenItems(): Array<IAvatarGroupItem> {\n return this.element?.hiddenItems ?? [];\n }\n\n\n /**\n * Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.\n */\n ui5Click = output<UI5CustomEvent<_AvatarGroup, 'click'>>();\n\n /**\n * Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed\n */\n ui5Overflow = output<UI5CustomEvent<_AvatarGroup, 'overflow'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.\n * - **overflowButton**: Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.\n *\n * @example\n * ```html\n * <ui5-avatar-group>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-avatar-group>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the items of the component. Use the `ui5-avatar` component as an item.\\n\\n**Note:** The UX guidelines recommends using avatars with \\\"Circle\\\" shape.\\n\\nMoreover, if you use avatars with \\\"Square\\\" shape, there will be visual inconsistency\\nas the built-in overflow action has \\\"Circle\\\" shape.\"\n },\n {\n \"name\": \"overflowButton\",\n \"description\": \"Defines the overflow button of the component.\\n\\n**Note:** We recommend using the `ui5-button` component.\\n\\n**Note:** If this slot is not used, the component will display the built-in overflow button.\",\n \"since\": \"1.0.0-rc.13\"\n }\n ];\n\n\n public elementRef: ElementRef<_AvatarGroup> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _AvatarGroup {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibilityAttributes',\n 'accessibleName',\n 'accessibleNameRef',\n 'type',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Click',\n 'ui5Overflow',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n// Re-export types for convenience\nexport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nexport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, inject, ElementRef, Injector, DestroyRef, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import '@ui5/webcomponents/dist/Avatar.js';
|
|
4
|
-
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
-
|
|
6
|
-
class Avatar {
|
|
7
|
-
constructor() {
|
|
8
|
-
/**
|
|
9
|
-
* Defines the additional accessibility attributes that will be applied to the component.
|
|
10
|
-
The following field is supported:
|
|
11
|
-
|
|
12
|
-
- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
|
|
13
|
-
Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
|
|
14
|
-
*/
|
|
15
|
-
this.accessibilityAttributes = input({}, /* @ts-ignore */
|
|
16
|
-
...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : /* istanbul ignore next */ []));
|
|
17
|
-
/**
|
|
18
|
-
* Defines the text alternative of the component.
|
|
19
|
-
If not provided a default text alternative will be set, if present.
|
|
20
|
-
*/
|
|
21
|
-
this.accessibleName = input(/* @ts-ignore */
|
|
22
|
-
...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : /* istanbul ignore next */ []));
|
|
23
|
-
/**
|
|
24
|
-
* Defines the background color of the desired image.
|
|
25
|
-
If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
|
|
26
|
-
*/
|
|
27
|
-
this.colorScheme = input("Auto", /* @ts-ignore */
|
|
28
|
-
...(ngDevMode ? [{ debugName: "colorScheme" }] : /* istanbul ignore next */ []));
|
|
29
|
-
/**
|
|
30
|
-
* Defines whether the component is disabled.
|
|
31
|
-
A disabled component can't be pressed or
|
|
32
|
-
focused, and it is not in the tab chain.
|
|
33
|
-
*/
|
|
34
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
35
|
-
/**
|
|
36
|
-
* Defines the name of the fallback icon, which should be displayed in the following cases:
|
|
37
|
-
|
|
38
|
-
- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
|
|
39
|
-
- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
|
|
40
|
-
- If the image src is wrong.
|
|
41
|
-
|
|
42
|
-
**Note:** If not set, a default fallback icon "employee" is displayed.
|
|
43
|
-
|
|
44
|
-
**Note:** You should import the desired icon first, then use its name as "fallback-icon".
|
|
45
|
-
|
|
46
|
-
`import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
|
|
47
|
-
|
|
48
|
-
`<ui5-avatar fallback-icon="alert">`
|
|
49
|
-
|
|
50
|
-
See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
|
|
51
|
-
*/
|
|
52
|
-
this.fallbackIcon = input("employee", /* @ts-ignore */
|
|
53
|
-
...(ngDevMode ? [{ debugName: "fallbackIcon" }] : /* istanbul ignore next */ []));
|
|
54
|
-
/**
|
|
55
|
-
* Defines the name of the UI5 Icon, that will be displayed.
|
|
56
|
-
|
|
57
|
-
**Note:** If `image` slot is provided, the property will be ignored.
|
|
58
|
-
|
|
59
|
-
**Note:** You should import the desired icon first, then use its name as "icon".
|
|
60
|
-
|
|
61
|
-
`import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
|
|
62
|
-
|
|
63
|
-
`<ui5-avatar icon="employee">`
|
|
64
|
-
|
|
65
|
-
**Note:** If no icon or an empty one is provided, by default the "employee" icon should be displayed.
|
|
66
|
-
|
|
67
|
-
See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
|
|
68
|
-
*/
|
|
69
|
-
this.icon = input(/* @ts-ignore */
|
|
70
|
-
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
71
|
-
/**
|
|
72
|
-
* Defines the displayed initials.
|
|
73
|
-
|
|
74
|
-
Up to three Latin letters can be displayed as initials.
|
|
75
|
-
*/
|
|
76
|
-
this.initials = input(/* @ts-ignore */
|
|
77
|
-
...(ngDevMode ? [undefined, { debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
78
|
-
/**
|
|
79
|
-
* Defines if the avatar is interactive (focusable and pressable).
|
|
80
|
-
|
|
81
|
-
**Note:** When set to `true`, this property takes precedence over the `mode` property,
|
|
82
|
-
and the avatar will be rendered as interactive (role="button", focusable) regardless of the `mode` value.
|
|
83
|
-
|
|
84
|
-
**Note:** This property won't have effect if the `disabled`
|
|
85
|
-
property is set to `true`.
|
|
86
|
-
*/
|
|
87
|
-
this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
88
|
-
/**
|
|
89
|
-
* Defines the mode of the component.
|
|
90
|
-
|
|
91
|
-
**Note:**
|
|
92
|
-
- `Image` (default) - renders with role="img"
|
|
93
|
-
- `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative
|
|
94
|
-
- `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction
|
|
95
|
-
|
|
96
|
-
**Note:** This property is ignored when the `interactive` property is set to `true`.
|
|
97
|
-
In that case, the avatar will always be rendered as interactive.
|
|
98
|
-
*/
|
|
99
|
-
this.mode = input("Image", /* @ts-ignore */
|
|
100
|
-
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
101
|
-
/**
|
|
102
|
-
* Defines the shape of the component.
|
|
103
|
-
*/
|
|
104
|
-
this.shape = input("Circle", /* @ts-ignore */
|
|
105
|
-
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
106
|
-
/**
|
|
107
|
-
* Defines predefined size of the component.
|
|
108
|
-
*/
|
|
109
|
-
this.size = input("S", /* @ts-ignore */
|
|
110
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ [])); // className is now passed
|
|
111
|
-
/**
|
|
112
|
-
* Fired on mouseup, space and enter if avatar is interactive
|
|
113
|
-
|
|
114
|
-
**Note:** The event will not be fired if the `disabled`
|
|
115
|
-
property is set to `true`.
|
|
116
|
-
*/
|
|
117
|
-
this.ui5Click = output();
|
|
118
|
-
/**
|
|
119
|
-
* Available slots for content projection in this component.
|
|
120
|
-
*
|
|
121
|
-
* Slots allow you to insert custom content into predefined areas of the web component.
|
|
122
|
-
* Use the `slot` attribute on child elements to target specific slots.
|
|
123
|
-
*
|
|
124
|
-
* - **badge**: Defines the optional badge that will be used for visual affordance.
|
|
125
|
-
|
|
126
|
-
**Recommendation:** While badges are supported on all avatars, it is recommended
|
|
127
|
-
to use them with interactive avatars (via `mode="Interactive"` or `interactive` attribute)
|
|
128
|
-
to provide better user experience and accessibility.
|
|
129
|
-
|
|
130
|
-
**Note:** While the slot allows for custom badges, to achieve
|
|
131
|
-
the Fiori design, use the `ui5-avatar-badge` component.
|
|
132
|
-
* - **(default)**: Receives the desired `<img>` tag
|
|
133
|
-
|
|
134
|
-
**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
|
|
135
|
-
`ui5-avatar:not(:defined) {`<br/>
|
|
136
|
-
`visibility: hidden;`<br/>
|
|
137
|
-
`}`
|
|
138
|
-
*
|
|
139
|
-
* @example
|
|
140
|
-
* ```html
|
|
141
|
-
* <ui5-avatar>
|
|
142
|
-
* <div slot="header">Custom header content</div>
|
|
143
|
-
* <p>Default slot content</p>
|
|
144
|
-
* </ui5-avatar>
|
|
145
|
-
* ```
|
|
146
|
-
*
|
|
147
|
-
* @readonly
|
|
148
|
-
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
|
|
149
|
-
*/
|
|
150
|
-
this.slots = [
|
|
151
|
-
{
|
|
152
|
-
"name": "badge",
|
|
153
|
-
"description": "Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.",
|
|
154
|
-
"since": "1.7.0"
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
"name": "default",
|
|
158
|
-
"description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n `visibility: hidden;`<br/>\n`}`",
|
|
159
|
-
"since": "1.0.0-rc.15"
|
|
160
|
-
}
|
|
161
|
-
];
|
|
162
|
-
this.elementRef = inject(ElementRef);
|
|
163
|
-
this.injector = inject(Injector);
|
|
164
|
-
/**
|
|
165
|
-
* Content density observer is injected to activate automatic CSS class and
|
|
166
|
-
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
167
|
-
* @private
|
|
168
|
-
*/
|
|
169
|
-
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
170
|
-
this._destroyRef = inject(DestroyRef);
|
|
171
|
-
}
|
|
172
|
-
get element() {
|
|
173
|
-
return this.elementRef.nativeElement;
|
|
174
|
-
}
|
|
175
|
-
ngAfterViewInit() {
|
|
176
|
-
const wcElement = this.element;
|
|
177
|
-
const inputsToSync = [
|
|
178
|
-
'accessibilityAttributes',
|
|
179
|
-
'accessibleName',
|
|
180
|
-
'colorScheme',
|
|
181
|
-
'disabled',
|
|
182
|
-
'fallbackIcon',
|
|
183
|
-
'icon',
|
|
184
|
-
'initials',
|
|
185
|
-
'interactive',
|
|
186
|
-
'mode',
|
|
187
|
-
'shape',
|
|
188
|
-
'size',
|
|
189
|
-
];
|
|
190
|
-
// Synchronize inputs (properties)
|
|
191
|
-
for (const inputName of inputsToSync) {
|
|
192
|
-
// Find the corresponding camelCase signal property on the Angular component
|
|
193
|
-
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
194
|
-
// Use the Injector to run the effect in the correct context
|
|
195
|
-
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
196
|
-
runInInjectionContext(this.injector, () => {
|
|
197
|
-
effect(() => {
|
|
198
|
-
// Read the signal value
|
|
199
|
-
const value = this[signalName]();
|
|
200
|
-
if (wcElement) {
|
|
201
|
-
// Skip writes when the signal is undefined and the property is already truthy
|
|
202
|
-
// This prevents clobbering imperatively-set values (e.g., from RouterLink)
|
|
203
|
-
if (value === undefined && wcElement[inputName]) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
// Write the value to the Web Component's property
|
|
207
|
-
wcElement[inputName] = value;
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
const outputsToSync = [
|
|
214
|
-
'ui5Click',
|
|
215
|
-
];
|
|
216
|
-
// Synchronize outputs (events)
|
|
217
|
-
const _listeners = [];
|
|
218
|
-
for (const outputName of outputsToSync) {
|
|
219
|
-
// Map Angular output name to UI5 web component event name
|
|
220
|
-
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
221
|
-
// Ensure the output property exists and has an emit function before adding listener
|
|
222
|
-
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
223
|
-
// Cast the listener to the correct type to satisfy TypeScript
|
|
224
|
-
const listener = (e) => {
|
|
225
|
-
this[outputName].emit(e);
|
|
226
|
-
};
|
|
227
|
-
wcElement.addEventListener(eventName, listener);
|
|
228
|
-
_listeners.push(() => wcElement.removeEventListener(eventName, listener));
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));
|
|
232
|
-
}
|
|
233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: Avatar, isStandalone: true, selector: "ui5-avatar, [ui5-avatar]", inputs: { accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
|
|
235
|
-
contentDensityObserverProviders({
|
|
236
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
237
|
-
})
|
|
238
|
-
], exportAs: ["ui5Avatar"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
239
|
-
}
|
|
240
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: Avatar, decorators: [{
|
|
241
|
-
type: Component,
|
|
242
|
-
args: [{
|
|
243
|
-
standalone: true,
|
|
244
|
-
selector: 'ui5-avatar, [ui5-avatar]',
|
|
245
|
-
template: '<ng-content></ng-content>',
|
|
246
|
-
exportAs: 'ui5Avatar',
|
|
247
|
-
providers: [
|
|
248
|
-
contentDensityObserverProviders({
|
|
249
|
-
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
250
|
-
})
|
|
251
|
-
],
|
|
252
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
253
|
-
}]
|
|
254
|
-
}], propDecorators: { accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], colorScheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScheme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Generated bundle index. Do not edit.
|
|
258
|
-
*/
|
|
259
|
-
|
|
260
|
-
export { Avatar };
|
|
261
|
-
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-avatar.mjs.map
|