@nldd/design-system 0.8.78 → 0.8.80
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/custom-elements.json +1513 -476
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +4 -1
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +4 -1
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/menu/menu.d.ts +19 -1
- package/dist/components/actions/menu/menu.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.js +55 -25
- package/dist/components/actions/menu/menu.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.d.ts +9 -0
- package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.i18n.d.ts +1 -0
- package/dist/components/actions/toolbar/toolbar.i18n.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.i18n.js +1 -0
- package/dist/components/actions/toolbar/toolbar.i18n.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.js +20 -0
- package/dist/components/actions/toolbar/toolbar.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +39 -5
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.js +19 -1
- package/dist/components/actions/toolbar/toolbar.template.js.map +1 -1
- package/dist/components/components.js +97 -94
- package/dist/components/content/avatar/avatar.d.ts +51 -47
- package/dist/components/content/avatar/avatar.d.ts.map +1 -1
- package/dist/components/content/avatar/avatar.js +85 -75
- package/dist/components/content/avatar/avatar.js.map +1 -1
- package/dist/components/content/avatar/avatar.styles.js +2 -2
- package/dist/components/content/avatar/avatar.template.d.ts +1 -0
- package/dist/components/content/avatar/avatar.template.d.ts.map +1 -1
- package/dist/components/content/avatar/avatar.template.js +26 -18
- package/dist/components/content/avatar/avatar.template.js.map +1 -1
- package/dist/components/content/avatar-group/avatar-group.d.ts +90 -0
- package/dist/components/content/avatar-group/avatar-group.d.ts.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.i18n.d.ts +6 -0
- package/dist/components/content/avatar-group/avatar-group.i18n.d.ts.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.i18n.js +5 -0
- package/dist/components/content/avatar-group/avatar-group.i18n.js.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.js +169 -0
- package/dist/components/content/avatar-group/avatar-group.js.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.styles.d.ts +2 -0
- package/dist/components/content/avatar-group/avatar-group.styles.d.ts.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.styles.js +132 -0
- package/dist/components/content/avatar-group/avatar-group.styles.js.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.template.d.ts +3 -0
- package/dist/components/content/avatar-group/avatar-group.template.d.ts.map +1 -0
- package/dist/components/content/avatar-group/avatar-group.template.js +50 -0
- package/dist/components/content/avatar-group/avatar-group.template.js.map +1 -0
- package/dist/components/content/blockquote/blockquote.d.ts +3 -3
- package/dist/components/content/blockquote/blockquote.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.js +8 -8
- package/dist/components/content/blockquote/blockquote.js.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +1 -1
- package/dist/components/content/blockquote/blockquote.template.js +1 -1
- package/dist/components/content/blockquote/blockquote.template.js.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.d.ts +4 -4
- package/dist/components/content/code-viewer/code-viewer.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.js +5 -13
- package/dist/components/content/code-viewer/code-viewer.js.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +1 -1
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +18 -0
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.js +65 -27
- package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +16 -12
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/identity/identity.d.ts +71 -0
- package/dist/components/content/identity/identity.d.ts.map +1 -0
- package/dist/components/content/identity/identity.js +124 -0
- package/dist/components/content/identity/identity.js.map +1 -0
- package/dist/components/content/identity/identity.styles.d.ts +2 -0
- package/dist/components/content/identity/identity.styles.d.ts.map +1 -0
- package/dist/components/content/{byline/byline.styles.js → identity/identity.styles.js} +28 -47
- package/dist/components/content/identity/identity.styles.js.map +1 -0
- package/dist/components/content/identity/identity.template.d.ts +3 -0
- package/dist/components/content/identity/identity.template.d.ts.map +1 -0
- package/dist/components/content/{byline/byline.template.js → identity/identity.template.js} +12 -11
- package/dist/components/content/identity/identity.template.js.map +1 -0
- package/dist/components/content/tag/tag.d.ts +15 -10
- package/dist/components/content/tag/tag.d.ts.map +1 -1
- package/dist/components/content/tag/tag.js +15 -10
- package/dist/components/content/tag/tag.js.map +1 -1
- package/dist/components/content/title/title.d.ts +4 -4
- package/dist/components/content/title/title.js +4 -4
- package/dist/components/content/title/title.styles.js +1 -1
- package/dist/components/content/title/title.template.js +2 -2
- package/dist/components/content/token/token.d.ts +6 -2
- package/dist/components/content/token/token.d.ts.map +1 -1
- package/dist/components/content/token/token.js +6 -2
- package/dist/components/content/token/token.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.d.ts +26 -25
- package/dist/components/content/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.js +31 -25
- package/dist/components/content/tooltip/tooltip.js.map +1 -1
- package/dist/components/{index-v6dIt9IT.js → index-8pDDdMeW.js} +1 -1
- package/dist/components/{index-CcCKQ3Dj.js → index-C7QocEcT.js} +1 -1
- package/dist/components/{index-BNg_kPou.js → index-CDz7-C9c.js} +1 -1
- package/dist/components/{index-CU-wlUnI.js → index-CWQunWUb.js} +54096 -52492
- package/dist/components/{index-BmVf8Da6.js → index-CoY3JfIy.js} +1 -1
- package/dist/components/{index-D03jbAoU.js → index-DP9dl7P7.js} +1 -1
- package/dist/components/{index-D68oJ-Le.js → index-DV_2YpaH.js} +1 -1
- package/dist/components/index.d.ts +4 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.d.ts +5 -0
- package/dist/components/inputs/checkbox/checkbox.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.js +8 -0
- package/dist/components/inputs/checkbox/checkbox.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.js +17 -0
- package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.js +11 -0
- package/dist/components/inputs/checkbox/checkbox.template.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.js +7 -0
- package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
- package/dist/components/inputs/date-picker/date-picker.styles.d.ts.map +1 -1
- package/dist/components/inputs/date-picker/date-picker.styles.js +7 -2
- package/dist/components/inputs/date-picker/date-picker.styles.js.map +1 -1
- package/dist/components/inputs/file-field/file-field.d.ts +112 -0
- package/dist/components/inputs/file-field/file-field.d.ts.map +1 -0
- package/dist/components/inputs/file-field/file-field.i18n.d.ts +10 -0
- package/dist/components/inputs/file-field/file-field.i18n.d.ts.map +1 -0
- package/dist/components/inputs/file-field/file-field.i18n.js +9 -0
- package/dist/components/inputs/file-field/file-field.i18n.js.map +1 -0
- package/dist/components/inputs/file-field/file-field.js +246 -0
- package/dist/components/inputs/file-field/file-field.js.map +1 -0
- package/dist/components/inputs/file-field/file-field.styles.d.ts +2 -0
- package/dist/components/inputs/file-field/file-field.styles.d.ts.map +1 -0
- package/dist/components/inputs/file-field/file-field.styles.js +134 -0
- package/dist/components/inputs/file-field/file-field.styles.js.map +1 -0
- package/dist/components/inputs/file-field/file-field.template.d.ts +7 -0
- package/dist/components/inputs/file-field/file-field.template.d.ts.map +1 -0
- package/dist/components/inputs/file-field/file-field.template.js +63 -0
- package/dist/components/inputs/file-field/file-field.template.js.map +1 -0
- package/dist/components/inputs/radio-button/radio-button.d.ts +5 -0
- package/dist/components/inputs/radio-button/radio-button.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.js +8 -0
- package/dist/components/inputs/radio-button/radio-button.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.js +11 -0
- package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.js +10 -0
- package/dist/components/inputs/radio-button/radio-button.template.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.caret.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.caret.js +7 -1
- package/dist/components/inputs/text-editor/text-editor.caret.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.d.ts +0 -4
- package/dist/components/inputs/text-editor/text-editor.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.js +0 -6
- package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.styles.js +1 -9
- package/dist/components/inputs/text-editor/text-editor.styles.js.map +1 -1
- package/dist/components/inputs/time-field/time-field.template.js +1 -1
- package/dist/components/inputs/time-picker/time-picker.styles.d.ts.map +1 -1
- package/dist/components/inputs/time-picker/time-picker.styles.js +7 -2
- package/dist/components/inputs/time-picker/time-picker.styles.js.map +1 -1
- package/dist/components/layout/box/box.d.ts +17 -7
- package/dist/components/layout/box/box.d.ts.map +1 -1
- package/dist/components/layout/box/box.js +17 -7
- package/dist/components/layout/box/box.js.map +1 -1
- package/dist/components/layout/box/box.styles.d.ts.map +1 -1
- package/dist/components/layout/box/box.styles.js +9 -2
- package/dist/components/layout/box/box.styles.js.map +1 -1
- package/dist/components/layout/container/container.d.ts +10 -0
- package/dist/components/layout/container/container.d.ts.map +1 -1
- package/dist/components/layout/container/container.js +38 -0
- package/dist/components/layout/container/container.js.map +1 -1
- package/dist/components/layout/container/container.styles.d.ts.map +1 -1
- package/dist/components/layout/container/container.styles.js +10 -1
- package/dist/components/layout/container/container.styles.js.map +1 -1
- package/dist/components/layout/page/page.styles.d.ts.map +1 -1
- package/dist/components/layout/page/page.styles.js +8 -1
- package/dist/components/layout/page/page.styles.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.d.ts +32 -33
- package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.js +32 -33
- package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.js +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.js.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts +7 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.js +12 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +19 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
- package/dist/components/layout/popover/popover.d.ts +34 -28
- package/dist/components/layout/popover/popover.d.ts.map +1 -1
- package/dist/components/layout/popover/popover.js +44 -31
- package/dist/components/layout/popover/popover.js.map +1 -1
- package/dist/components/layout/sheet/sheet.d.ts +2 -0
- package/dist/components/layout/sheet/sheet.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.js +12 -1
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +9 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +9 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts +14 -14
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js +13 -13
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +13 -2
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.d.ts +8 -11
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +8 -10
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.js +13 -6
- package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +20 -16
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +44 -30
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.d.ts +15 -0
- package/dist/components/navigation/top-title-bar/top-title-bar.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.js +44 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.template.js +3 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.template.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.d.ts +23 -11
- package/dist/components/status-and-feedback/badge/badge.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.js +32 -14
- package/dist/components/status-and-feedback/badge/badge.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +59 -2
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.template.js +6 -1
- package/dist/components/status-and-feedback/badge/badge.template.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +6 -0
- package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.d.ts +2 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js +14 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js.map +1 -1
- package/dist/components/status-and-feedback/notification/notification-region.d.ts +6 -0
- package/dist/components/status-and-feedback/notification/notification-region.d.ts.map +1 -0
- package/dist/components/status-and-feedback/notification/notification-region.js +245 -0
- package/dist/components/status-and-feedback/notification/notification-region.js.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.d.ts +129 -0
- package/dist/components/status-and-feedback/notification/notification.d.ts.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.i18n.d.ts +6 -0
- package/dist/components/status-and-feedback/notification/notification.i18n.d.ts.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.i18n.js +5 -0
- package/dist/components/status-and-feedback/notification/notification.i18n.js.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.js +269 -0
- package/dist/components/status-and-feedback/notification/notification.js.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.styles.d.ts +2 -0
- package/dist/components/status-and-feedback/notification/notification.styles.d.ts.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.styles.js +177 -0
- package/dist/components/status-and-feedback/notification/notification.styles.js.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.template.d.ts +4 -0
- package/dist/components/status-and-feedback/notification/notification.template.d.ts.map +1 -0
- package/dist/components/status-and-feedback/notification/notification.template.js +40 -0
- package/dist/components/status-and-feedback/notification/notification.template.js.map +1 -0
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +1 -0
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts +30 -30
- package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts.map +1 -1
- package/dist/components/status-and-feedback/step-indicator/step-indicator.js +33 -30
- package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map +1 -1
- package/dist/css/variables.css +24 -0
- package/dist/nldd.min.js +8381 -7593
- package/dist/types/vue.d.ts +257 -152
- package/dist/utilities/open-when-rendered.d.ts +21 -0
- package/dist/utilities/open-when-rendered.d.ts.map +1 -0
- package/dist/utilities/open-when-rendered.js +30 -0
- package/dist/utilities/open-when-rendered.js.map +1 -0
- package/dist/utilities/reflect-non-default.d.ts +3 -3
- package/dist/utilities/reflect-non-default.d.ts.map +1 -1
- package/dist/utilities/reflect-non-default.js +7 -4
- package/dist/utilities/reflect-non-default.js.map +1 -1
- package/dist/utilities/visibility-mixin.d.ts +5 -0
- package/dist/utilities/visibility-mixin.d.ts.map +1 -1
- package/dist/utilities/visibility-mixin.js +22 -0
- package/dist/utilities/visibility-mixin.js.map +1 -1
- package/package.json +34 -23
- package/dist/components/content/byline/byline.d.ts +0 -73
- package/dist/components/content/byline/byline.d.ts.map +0 -1
- package/dist/components/content/byline/byline.js +0 -125
- package/dist/components/content/byline/byline.js.map +0 -1
- package/dist/components/content/byline/byline.styles.d.ts +0 -2
- package/dist/components/content/byline/byline.styles.d.ts.map +0 -1
- package/dist/components/content/byline/byline.styles.js.map +0 -1
- package/dist/components/content/byline/byline.template.d.ts +0 -3
- package/dist/components/content/byline/byline.template.d.ts.map +0 -1
- package/dist/components/content/byline/byline.template.js.map +0 -1
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* NLDD Design System Avatar Component (Lit + TypeScript)
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Shows one person or organization as a compact, round (person) or rounded
|
|
5
|
+
* (organization) representation. The content follows a fixed fallback chain: an
|
|
6
|
+
* image when `src` loads, otherwise the initials (from `initials` or derived
|
|
7
|
+
* from `name`), and otherwise a fallback icon.
|
|
8
8
|
*
|
|
9
|
-
* `type`
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* `type` sets both the shape and the fallback icon: `person` gives a circle
|
|
10
|
+
* with a person icon, `organization` a rounded square with a building icon. The
|
|
11
|
+
* shape belongs to the meaning and cannot be set on its own. Override the
|
|
12
|
+
* fallback icon with `icon` where that helps.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
14
|
+
* Without `size` the avatar scales with its container, like `nldd-icon`; a
|
|
15
|
+
* fixed size (the same spacer-aligned scale, 16 through 96) is the exception.
|
|
16
|
+
* The initials and the icon scale along. Wide initials (WW, MMM) are scaled
|
|
17
|
+
* down automatically so they stay inside the shape.
|
|
18
18
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* `decorative`
|
|
23
|
-
*
|
|
24
|
-
* gebroken-afbeelding-icoon.
|
|
19
|
+
* Accessibility: the host element carries the meaning. With a `name` (and
|
|
20
|
+
* without `decorative`) it gets `role="img"` with the name as its label. When
|
|
21
|
+
* the name already stands beside it as text, in an identity for instance, set
|
|
22
|
+
* `decorative` so the avatar stays hidden from assistive software. A dead `src`
|
|
23
|
+
* falls back to the initials or the icon, never to a broken-image icon.
|
|
25
24
|
*
|
|
26
25
|
* @element nldd-avatar
|
|
27
26
|
*
|
|
28
|
-
* @attr {string}
|
|
29
|
-
* @attr {string}
|
|
30
|
-
* @attr {string}
|
|
31
|
-
* @attr {
|
|
32
|
-
* @attr {string}
|
|
33
|
-
* @attr {string}
|
|
34
|
-
* @attr {string}
|
|
35
|
-
* @attr {string}
|
|
36
|
-
* @attr {
|
|
37
|
-
* @attr {
|
|
38
|
-
* @attr {
|
|
39
|
-
* @attr {
|
|
40
|
-
* @attr {string}
|
|
41
|
-
* @attr {
|
|
42
|
-
* @attr {string}
|
|
43
|
-
* @attr {
|
|
27
|
+
* @attr {string} type - `person` (circle, person icon) or `organization` (rounded, building icon); default `person`
|
|
28
|
+
* @attr {string} size - `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along
|
|
29
|
+
* @attr {string} color - `default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default`
|
|
30
|
+
* @attr {boolean} icon-aligned - Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin)
|
|
31
|
+
* @attr {string} name - Name of the person or organization; supplies the derived initials and the accessible label
|
|
32
|
+
* @attr {string} initials - Explicit initials, at most 3 characters (overrides what is derived from `name`; also for organization acronyms)
|
|
33
|
+
* @attr {string} src - Image source; falls back to initials or icon when it fails to load
|
|
34
|
+
* @attr {string} srcset - Responsive source set for the image (the component sets `sizes` itself)
|
|
35
|
+
* @attr {string} icon - Overrides the type-dependent fallback icon
|
|
36
|
+
* @attr {string} accessible-label - Name of the link or button; without it `name` is used
|
|
37
|
+
* @attr {boolean} decorative - Hides the avatar from assistive software (use when the name already stands beside it as text)
|
|
38
|
+
* @attr {string} tooltip-timing - When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text
|
|
39
|
+
* @attr {string} href - Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it
|
|
40
|
+
* @attr {boolean} button - Makes the avatar a button; ignored when `href` is set
|
|
41
|
+
* @attr {string} target - Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab"
|
|
42
|
+
* @attr {string} rel - Link rel for href; defaults to 'noopener noreferrer' when target='_blank'
|
|
43
|
+
* @attr {object} translations - Override translation keys; unset keys fall back to Dutch
|
|
44
44
|
*
|
|
45
45
|
* @example
|
|
46
46
|
* ```html
|
|
@@ -66,17 +66,24 @@ declare const NLDDAvatar_base: (abstract new (...args: any[]) => LitElement & {
|
|
|
66
66
|
}) & typeof LitElement;
|
|
67
67
|
export declare class NLDDAvatar extends NLDDAvatar_base {
|
|
68
68
|
static styles: import("lit").CSSResult;
|
|
69
|
-
src: string;
|
|
70
|
-
srcset: string;
|
|
71
|
-
name: string;
|
|
72
|
-
initials: string;
|
|
73
|
-
icon: string;
|
|
74
69
|
type: AvatarType;
|
|
75
|
-
color: AvatarColor;
|
|
76
70
|
size: AvatarSize;
|
|
71
|
+
color: AvatarColor;
|
|
77
72
|
iconAligned: boolean;
|
|
73
|
+
name: string;
|
|
74
|
+
initials: string;
|
|
75
|
+
src: string;
|
|
76
|
+
srcset: string;
|
|
77
|
+
icon: string;
|
|
78
|
+
/** Accessible name of the link or button. Without it, it falls back to
|
|
79
|
+
* `name`. Only matters when the avatar is interactive. */
|
|
80
|
+
accessibleLabel: string;
|
|
78
81
|
decorative: boolean;
|
|
79
|
-
/**
|
|
82
|
+
/** Forwarded to the inner nldd-tooltip's `timing`, like nldd-icon-button.
|
|
83
|
+
* On by default: initials without a name are a riddle. An
|
|
84
|
+
* avatar that sits beside that name is `decorative` and shows none. */
|
|
85
|
+
tooltipTiming: 'default' | 'instant' | 'never';
|
|
86
|
+
/** Makes the avatar one link: the shape itself becomes the <a>, so the click
|
|
80
87
|
* area and the focus ring follow its shape (an overlay would be square). */
|
|
81
88
|
href: string;
|
|
82
89
|
/** Makes the avatar a button. Ignored once `href` is set: one avatar is one
|
|
@@ -84,9 +91,6 @@ export declare class NLDDAvatar extends NLDDAvatar_base {
|
|
|
84
91
|
button: boolean;
|
|
85
92
|
target: string;
|
|
86
93
|
rel: string;
|
|
87
|
-
/** Accessible name of the link or button. Without it, it falls back to
|
|
88
|
-
* `name`. Only matters when the avatar is interactive. */
|
|
89
|
-
accessibleLabel: string;
|
|
90
94
|
/** True once the avatar is a control itself. */
|
|
91
95
|
get isInteractive(): boolean;
|
|
92
96
|
/** Resolves rel for the link: _blank adds noopener/noreferrer (mirroring
|
|
@@ -102,7 +106,7 @@ export declare class NLDDAvatar extends NLDDAvatar_base {
|
|
|
102
106
|
/** Fallback icon when there is neither image nor initials. */
|
|
103
107
|
get resolvedIcon(): string;
|
|
104
108
|
_onImageError: () => void;
|
|
105
|
-
/** Re-measures the initials fit when the
|
|
109
|
+
/** Re-measures the initials fit when the shape lays out or resizes; covers the
|
|
106
110
|
* case where the avatar is only sized after first render (e.g. filling a
|
|
107
111
|
* container that appears later). Content changes are handled in updated(). */
|
|
108
112
|
private _resizeObserver;
|
|
@@ -111,8 +115,8 @@ export declare class NLDDAvatar extends NLDDAvatar_base {
|
|
|
111
115
|
connectedCallback(): void;
|
|
112
116
|
disconnectedCallback(): void;
|
|
113
117
|
updated(changed: PropertyValues<this>): void;
|
|
114
|
-
/** Shrink wide initials so they always fit
|
|
115
|
-
*
|
|
118
|
+
/** Shrink wide initials so they always fit. The fit factor is the shape's
|
|
119
|
+
* usable width over the initials' natural width (scrollWidth ignores
|
|
116
120
|
* the applied transform, so the measurement stays stable); capped at 1 so
|
|
117
121
|
* narrow initials are never enlarged. Applied via --_initials-fit (a
|
|
118
122
|
* transform scale), so no reflow and it stays measurable. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAOhD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GACrB,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAEjG,qBACa,UAAW,SAAQ,eAAoD;IACnF,OAAgB,MAAM,0BAAgB;IAGtC,
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAOhD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GACrB,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAEjG,qBACa,UAAW,SAAQ,eAAoD;IACnF,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,EAAE,UAAU,CAAY;IAG5B,IAAI,EAAE,UAAU,CAAM;IAGtB,KAAK,EAAE,WAAW,CAAa;IAG/B,WAAW,UAAS;IAGpB,IAAI,SAAM;IAGV,QAAQ,SAAM;IAGd,GAAG,SAAM;IAGT,MAAM,SAAM;IAGZ,IAAI,SAAM;IAEV;+DAC2D;IAE3D,eAAe,SAAM;IAGrB,UAAU,UAAS;IAEnB;;4EAEwE;IAExE,aAAa,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE3D;iFAC6E;IAE7E,IAAI,SAAM;IAEV;6EACyE;IAEzE,MAAM,UAAS;IAGf,MAAM,SAAM;IAGZ,GAAG,SAAM;IAET,gDAAgD;IAChD,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED;mEAC+D;IAC/D,YAAY,IAAI,MAAM;IAStB,OAAO,CAAC,YAAY,CAAS;IAE7B;mEAC+D;IAE/D,YAAY,UAAS;IAErB;2EACuE;IACvE,IAAI,gBAAgB,IAAI,MAAM,CAO7B;IAED,8DAA8D;IAC9D,IAAI,YAAY,IAAI,MAAM,CAGzB;IAED,aAAa,QAAO,IAAI,CAEtB;IAEF;;mFAE+E;IAC/E,OAAO,CAAC,eAAe,CAAiD;IAE/D,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS/C,YAAY,IAAI,IAAI;IAKpB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiDrD;;;;kEAI8D;IAC9D,OAAO,CAAC,YAAY;IAaX,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -7,46 +7,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
/**
|
|
8
8
|
* NLDD Design System Avatar Component (Lit + TypeScript)
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
10
|
+
* Shows one person or organization as a compact, round (person) or rounded
|
|
11
|
+
* (organization) representation. The content follows a fixed fallback chain: an
|
|
12
|
+
* image when `src` loads, otherwise the initials (from `initials` or derived
|
|
13
|
+
* from `name`), and otherwise a fallback icon.
|
|
14
14
|
*
|
|
15
|
-
* `type`
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
15
|
+
* `type` sets both the shape and the fallback icon: `person` gives a circle
|
|
16
|
+
* with a person icon, `organization` a rounded square with a building icon. The
|
|
17
|
+
* shape belongs to the meaning and cannot be set on its own. Override the
|
|
18
|
+
* fallback icon with `icon` where that helps.
|
|
19
19
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
20
|
+
* Without `size` the avatar scales with its container, like `nldd-icon`; a
|
|
21
|
+
* fixed size (the same spacer-aligned scale, 16 through 96) is the exception.
|
|
22
|
+
* The initials and the icon scale along. Wide initials (WW, MMM) are scaled
|
|
23
|
+
* down automatically so they stay inside the shape.
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* `decorative`
|
|
29
|
-
*
|
|
30
|
-
* gebroken-afbeelding-icoon.
|
|
25
|
+
* Accessibility: the host element carries the meaning. With a `name` (and
|
|
26
|
+
* without `decorative`) it gets `role="img"` with the name as its label. When
|
|
27
|
+
* the name already stands beside it as text, in an identity for instance, set
|
|
28
|
+
* `decorative` so the avatar stays hidden from assistive software. A dead `src`
|
|
29
|
+
* falls back to the initials or the icon, never to a broken-image icon.
|
|
31
30
|
*
|
|
32
31
|
* @element nldd-avatar
|
|
33
32
|
*
|
|
34
|
-
* @attr {string}
|
|
35
|
-
* @attr {string}
|
|
36
|
-
* @attr {string}
|
|
37
|
-
* @attr {
|
|
38
|
-
* @attr {string}
|
|
39
|
-
* @attr {string}
|
|
40
|
-
* @attr {string}
|
|
41
|
-
* @attr {string}
|
|
42
|
-
* @attr {
|
|
43
|
-
* @attr {
|
|
44
|
-
* @attr {
|
|
45
|
-
* @attr {
|
|
46
|
-
* @attr {string}
|
|
47
|
-
* @attr {
|
|
48
|
-
* @attr {string}
|
|
49
|
-
* @attr {
|
|
33
|
+
* @attr {string} type - `person` (circle, person icon) or `organization` (rounded, building icon); default `person`
|
|
34
|
+
* @attr {string} size - `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along
|
|
35
|
+
* @attr {string} color - `default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default`
|
|
36
|
+
* @attr {boolean} icon-aligned - Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin)
|
|
37
|
+
* @attr {string} name - Name of the person or organization; supplies the derived initials and the accessible label
|
|
38
|
+
* @attr {string} initials - Explicit initials, at most 3 characters (overrides what is derived from `name`; also for organization acronyms)
|
|
39
|
+
* @attr {string} src - Image source; falls back to initials or icon when it fails to load
|
|
40
|
+
* @attr {string} srcset - Responsive source set for the image (the component sets `sizes` itself)
|
|
41
|
+
* @attr {string} icon - Overrides the type-dependent fallback icon
|
|
42
|
+
* @attr {string} accessible-label - Name of the link or button; without it `name` is used
|
|
43
|
+
* @attr {boolean} decorative - Hides the avatar from assistive software (use when the name already stands beside it as text)
|
|
44
|
+
* @attr {string} tooltip-timing - When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text
|
|
45
|
+
* @attr {string} href - Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it
|
|
46
|
+
* @attr {boolean} button - Makes the avatar a button; ignored when `href` is set
|
|
47
|
+
* @attr {string} target - Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab"
|
|
48
|
+
* @attr {string} rel - Link rel for href; defaults to 'noopener noreferrer' when target='_blank'
|
|
49
|
+
* @attr {object} translations - Override translation keys; unset keys fall back to Dutch
|
|
50
50
|
*
|
|
51
51
|
* @example
|
|
52
52
|
* ```html
|
|
@@ -66,24 +66,31 @@ import { nlddAvatarTranslations } from './avatar.i18n.js';
|
|
|
66
66
|
import { avatarStyles } from './avatar.styles.js';
|
|
67
67
|
import { avatarTemplate } from './avatar.template.js';
|
|
68
68
|
import '../icon/icon.js';
|
|
69
|
-
/** Fraction of the
|
|
69
|
+
/** Fraction of the shape width the initials may occupy before they are scaled to
|
|
70
70
|
* fit. Leaves margin inside the circle so wide glyphs stay clear of the edge
|
|
71
71
|
* (the circle narrows above/below the center, so caps need room). */
|
|
72
72
|
const INITIALS_FIT_RATIO = 0.75;
|
|
73
73
|
let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvatarTranslations) {
|
|
74
74
|
constructor() {
|
|
75
75
|
super(...arguments);
|
|
76
|
-
this.src = '';
|
|
77
|
-
this.srcset = '';
|
|
78
|
-
this.name = '';
|
|
79
|
-
this.initials = '';
|
|
80
|
-
this.icon = '';
|
|
81
76
|
this.type = 'person';
|
|
82
|
-
this.color = 'default';
|
|
83
77
|
this.size = '';
|
|
78
|
+
this.color = 'default';
|
|
84
79
|
this.iconAligned = false;
|
|
80
|
+
this.name = '';
|
|
81
|
+
this.initials = '';
|
|
82
|
+
this.src = '';
|
|
83
|
+
this.srcset = '';
|
|
84
|
+
this.icon = '';
|
|
85
|
+
/** Accessible name of the link or button. Without it, it falls back to
|
|
86
|
+
* `name`. Only matters when the avatar is interactive. */
|
|
87
|
+
this.accessibleLabel = '';
|
|
85
88
|
this.decorative = false;
|
|
86
|
-
/**
|
|
89
|
+
/** Forwarded to the inner nldd-tooltip's `timing`, like nldd-icon-button.
|
|
90
|
+
* On by default: initials without a name are a riddle. An
|
|
91
|
+
* avatar that sits beside that name is `decorative` and shows none. */
|
|
92
|
+
this.tooltipTiming = 'default';
|
|
93
|
+
/** Makes the avatar one link: the shape itself becomes the <a>, so the click
|
|
87
94
|
* area and the focus ring follow its shape (an overlay would be square). */
|
|
88
95
|
this.href = '';
|
|
89
96
|
/** Makes the avatar a button. Ignored once `href` is set: one avatar is one
|
|
@@ -91,9 +98,6 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
91
98
|
this.button = false;
|
|
92
99
|
this.target = '';
|
|
93
100
|
this.rel = '';
|
|
94
|
-
/** Accessible name of the link or button. Without it, it falls back to
|
|
95
|
-
* `name`. Only matters when the avatar is interactive. */
|
|
96
|
-
this.accessibleLabel = '';
|
|
97
101
|
this._warnedLabel = false;
|
|
98
102
|
/** Set when the image errors, so the template falls through to the next
|
|
99
103
|
* content step. Not private: the template module reads it. */
|
|
@@ -101,7 +105,7 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
101
105
|
this._onImageError = () => {
|
|
102
106
|
this._imageFailed = true;
|
|
103
107
|
};
|
|
104
|
-
/** Re-measures the initials fit when the
|
|
108
|
+
/** Re-measures the initials fit when the shape lays out or resizes; covers the
|
|
105
109
|
* case where the avatar is only sized after first render (e.g. filling a
|
|
106
110
|
* container that appears later). Content changes are handled in updated(). */
|
|
107
111
|
this._resizeObserver = new ResizeObserver(() => this._fitInitials());
|
|
@@ -140,21 +144,24 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
140
144
|
return this.type === 'organization' ? 'building' : 'person';
|
|
141
145
|
}
|
|
142
146
|
willUpdate(changed) {
|
|
147
|
+
// withTranslations merges a consumer's `translations` override in its own
|
|
148
|
+
// willUpdate; without this call the override is silently ignored.
|
|
149
|
+
super.willUpdate(changed);
|
|
143
150
|
// Either source changing offers a fresh candidate, so give the image
|
|
144
151
|
// another chance rather than staying on the fallback forever.
|
|
145
152
|
if (changed.has('src') || changed.has('srcset'))
|
|
146
153
|
this._imageFailed = false;
|
|
147
154
|
}
|
|
148
155
|
firstUpdated() {
|
|
149
|
-
const
|
|
150
|
-
if (
|
|
151
|
-
this._resizeObserver.observe(
|
|
156
|
+
const shape = this.shadowRoot?.querySelector('.avatar');
|
|
157
|
+
if (shape)
|
|
158
|
+
this._resizeObserver.observe(shape);
|
|
152
159
|
}
|
|
153
160
|
connectedCallback() {
|
|
154
161
|
super.connectedCallback();
|
|
155
|
-
const
|
|
156
|
-
if (this.hasUpdated &&
|
|
157
|
-
this._resizeObserver.observe(
|
|
162
|
+
const shape = this.shadowRoot?.querySelector('.avatar');
|
|
163
|
+
if (this.hasUpdated && shape)
|
|
164
|
+
this._resizeObserver.observe(shape);
|
|
158
165
|
}
|
|
159
166
|
disconnectedCallback() {
|
|
160
167
|
super.disconnectedCallback();
|
|
@@ -197,7 +204,7 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
197
204
|
this._warnedLabel = false;
|
|
198
205
|
}
|
|
199
206
|
}
|
|
200
|
-
// The
|
|
207
|
+
// The shape does not resize when only its content does, so the
|
|
201
208
|
// ResizeObserver won't fire — re-measure here on every change that can
|
|
202
209
|
// swap the initials in or alter their text. src/_imageFailed matter too:
|
|
203
210
|
// a dead image falls back to initials that were never measured.
|
|
@@ -206,19 +213,19 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
206
213
|
this._fitInitials();
|
|
207
214
|
}
|
|
208
215
|
}
|
|
209
|
-
/** Shrink wide initials so they always fit
|
|
210
|
-
*
|
|
216
|
+
/** Shrink wide initials so they always fit. The fit factor is the shape's
|
|
217
|
+
* usable width over the initials' natural width (scrollWidth ignores
|
|
211
218
|
* the applied transform, so the measurement stays stable); capped at 1 so
|
|
212
219
|
* narrow initials are never enlarged. Applied via --_initials-fit (a
|
|
213
220
|
* transform scale), so no reflow and it stays measurable. */
|
|
214
221
|
_fitInitials() {
|
|
215
222
|
const initials = this.shadowRoot?.querySelector('.avatar__initials');
|
|
216
|
-
const
|
|
217
|
-
if (!initials || !
|
|
223
|
+
const shape = this.shadowRoot?.querySelector('.avatar');
|
|
224
|
+
if (!initials || !shape) {
|
|
218
225
|
this.style.removeProperty('--_initials-fit');
|
|
219
226
|
return;
|
|
220
227
|
}
|
|
221
|
-
const available =
|
|
228
|
+
const available = shape.clientWidth * INITIALS_FIT_RATIO;
|
|
222
229
|
const actual = initials.scrollWidth;
|
|
223
230
|
if (available <= 0 || actual <= 0)
|
|
224
231
|
return; // not laid out yet — leave as is
|
|
@@ -230,11 +237,17 @@ let NLDDAvatar = class NLDDAvatar extends withTranslations(LitElement, nlddAvata
|
|
|
230
237
|
};
|
|
231
238
|
NLDDAvatar.styles = avatarStyles;
|
|
232
239
|
__decorate([
|
|
233
|
-
property({
|
|
234
|
-
], NLDDAvatar.prototype, "
|
|
240
|
+
property({ reflect: true, converter: reflectNonDefault('person') })
|
|
241
|
+
], NLDDAvatar.prototype, "type", void 0);
|
|
235
242
|
__decorate([
|
|
236
|
-
property({
|
|
237
|
-
], NLDDAvatar.prototype, "
|
|
243
|
+
property({ reflect: true, converter: reflectNonDefault('') })
|
|
244
|
+
], NLDDAvatar.prototype, "size", void 0);
|
|
245
|
+
__decorate([
|
|
246
|
+
property({ reflect: true, converter: reflectNonDefault('default') })
|
|
247
|
+
], NLDDAvatar.prototype, "color", void 0);
|
|
248
|
+
__decorate([
|
|
249
|
+
property({ type: Boolean, reflect: true, attribute: 'icon-aligned' })
|
|
250
|
+
], NLDDAvatar.prototype, "iconAligned", void 0);
|
|
238
251
|
__decorate([
|
|
239
252
|
property({ type: String })
|
|
240
253
|
], NLDDAvatar.prototype, "name", void 0);
|
|
@@ -243,22 +256,22 @@ __decorate([
|
|
|
243
256
|
], NLDDAvatar.prototype, "initials", void 0);
|
|
244
257
|
__decorate([
|
|
245
258
|
property({ type: String })
|
|
246
|
-
], NLDDAvatar.prototype, "
|
|
247
|
-
__decorate([
|
|
248
|
-
property({ reflect: true, converter: reflectNonDefault('person') })
|
|
249
|
-
], NLDDAvatar.prototype, "type", void 0);
|
|
259
|
+
], NLDDAvatar.prototype, "src", void 0);
|
|
250
260
|
__decorate([
|
|
251
|
-
property({
|
|
252
|
-
], NLDDAvatar.prototype, "
|
|
261
|
+
property({ type: String })
|
|
262
|
+
], NLDDAvatar.prototype, "srcset", void 0);
|
|
253
263
|
__decorate([
|
|
254
|
-
property({
|
|
255
|
-
], NLDDAvatar.prototype, "
|
|
264
|
+
property({ type: String })
|
|
265
|
+
], NLDDAvatar.prototype, "icon", void 0);
|
|
256
266
|
__decorate([
|
|
257
|
-
property({ type:
|
|
258
|
-
], NLDDAvatar.prototype, "
|
|
267
|
+
property({ type: String, attribute: 'accessible-label' })
|
|
268
|
+
], NLDDAvatar.prototype, "accessibleLabel", void 0);
|
|
259
269
|
__decorate([
|
|
260
270
|
property({ type: Boolean, reflect: true })
|
|
261
271
|
], NLDDAvatar.prototype, "decorative", void 0);
|
|
272
|
+
__decorate([
|
|
273
|
+
property({ reflect: true, attribute: 'tooltip-timing', converter: reflectNonDefault('default') })
|
|
274
|
+
], NLDDAvatar.prototype, "tooltipTiming", void 0);
|
|
262
275
|
__decorate([
|
|
263
276
|
property({ type: String, reflect: true })
|
|
264
277
|
], NLDDAvatar.prototype, "href", void 0);
|
|
@@ -271,9 +284,6 @@ __decorate([
|
|
|
271
284
|
__decorate([
|
|
272
285
|
property({ type: String })
|
|
273
286
|
], NLDDAvatar.prototype, "rel", void 0);
|
|
274
|
-
__decorate([
|
|
275
|
-
property({ type: String, attribute: 'accessible-label' })
|
|
276
|
-
], NLDDAvatar.prototype, "accessibleLabel", void 0);
|
|
277
287
|
__decorate([
|
|
278
288
|
state()
|
|
279
289
|
], NLDDAvatar.prototype, "_imageFailed", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,iBAAiB,CAAC;AAMzB;;sEAEsE;AACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAOzB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,gBAAgB,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAA7E;;QAIN,
|
|
1
|
+
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.ts"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,7 @@ export const avatarStyles = css `
|
|
|
47
47
|
--_content-color: var(--semantics-content-contrast-color);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
/* Shrink the visible
|
|
50
|
+
/* Shrink the visible shape to 5/6 of the host (centered), so the avatar lines
|
|
51
51
|
up optically with an icon on the same grid (an icon glyph has built-in
|
|
52
52
|
padding). The host keeps the grid cell size. */
|
|
53
53
|
:host([icon-aligned]) {
|
|
@@ -94,7 +94,7 @@ export const avatarStyles = css `
|
|
|
94
94
|
user-select: none;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
/* # Interactive — the
|
|
97
|
+
/* # Interactive — the shape itself is the link or button */
|
|
98
98
|
|
|
99
99
|
.avatar--interactive {
|
|
100
100
|
padding: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"avatar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,uBAAuB,CAAC;AAE/B,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CAyEpE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { html, nothing } from 'lit';
|
|
2
|
+
import '../tooltip/tooltip.js';
|
|
2
3
|
export function avatarTemplate(component) {
|
|
3
4
|
const showImage = Boolean(component.src) && !component._imageFailed;
|
|
4
5
|
const initials = component.resolvedInitials;
|
|
@@ -38,29 +39,36 @@ export function avatarTemplate(component) {
|
|
|
38
39
|
></nldd-icon>
|
|
39
40
|
` : nothing}
|
|
40
41
|
`;
|
|
41
|
-
// The
|
|
42
|
-
// small and
|
|
43
|
-
// focus ring) outside
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
// The shape itself becomes the control, rather than an overlay: an avatar is
|
|
43
|
+
// small and rounded, so a rectangular overlay would take clicks (and paint a
|
|
44
|
+
// focus ring) outside it.
|
|
45
|
+
const shape = component.href
|
|
46
|
+
? html `
|
|
46
47
|
<a class="avatar avatar--interactive"
|
|
47
48
|
href=${component.href}
|
|
48
49
|
target=${component.target || nothing}
|
|
49
50
|
rel=${component._resolvedRel() || nothing}
|
|
50
51
|
aria-label=${controlLabel}
|
|
51
52
|
>${content}</a>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
53
|
+
`
|
|
54
|
+
: component.button
|
|
55
|
+
? html `
|
|
56
|
+
<button class="avatar avatar--interactive"
|
|
57
|
+
type="button"
|
|
58
|
+
aria-label=${controlLabel}
|
|
59
|
+
>${content}</button>
|
|
60
|
+
`
|
|
61
|
+
: html `<div class="avatar">${content}</div>`;
|
|
62
|
+
// The name as a tooltip, like nldd-icon-button does for its label: an avatar
|
|
63
|
+
// shows no text, so without this the name is readable by assistive software
|
|
64
|
+
// and by nobody else. Decorative avatars have nothing to say here.
|
|
65
|
+
const tooltipText = component.decorative ? '' : (component.accessibleLabel || component.name);
|
|
66
|
+
return tooltipText && component.tooltipTiming !== 'never'
|
|
67
|
+
? html `
|
|
68
|
+
<nldd-tooltip text=${tooltipText} timing=${component.tooltipTiming}>
|
|
69
|
+
${shape}
|
|
70
|
+
</nldd-tooltip>
|
|
71
|
+
`
|
|
72
|
+
: shape;
|
|
65
73
|
}
|
|
66
74
|
//# sourceMappingURL=avatar.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACpE,MAAM,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC;IAC5C,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,QAAQ,KAAK,EAAE,CAAC;IACnD,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,YAAY,CAAC;IAC7C,6EAA6E;IAC7E,MAAM,iBAAiB,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,KAAK,QAAQ;QACxE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;QAC1D,CAAC,CAAC,EAAE,CAAC;IACN,+DAA+D;IAC/D,4EAA4E;IAC5E,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,EAAE,iBAAiB,CAAC;SACnF,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC;IACxC,6EAA6E;IAC7E,4EAA4E;IAC5E,0EAA0E;IAC1E,MAAM,OAAO,GAAG,IAAI,CAAA;IACjB,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;UAEV,SAAS,CAAC,GAAG;aACV,SAAS,CAAC,MAAM,IAAI,OAAO;YAC5B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM;;;;aAI9C,SAAS,CAAC,aAAa;;GAEjC,CAAC,CAAC,CAAC,OAAO;IACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;MAGjB,QAAQ;GACX,CAAC,CAAC,CAAC,OAAO;IACT,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;WAER,SAAS,CAAC,YAAY;;GAE9B,CAAC,CAAC,CAAC,OAAO;EACX,CAAC;IAEF,6EAA6E;IAC7E,6EAA6E;IAC7E,0BAA0B;IAC1B,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI;QAC3B,CAAC,CAAC,IAAI,CAAA;;WAEG,SAAS,CAAC,IAAI;aACZ,SAAS,CAAC,MAAM,IAAI,OAAO;UAC9B,SAAS,CAAC,YAAY,EAAE,IAAI,OAAO;iBAC5B,YAAY;MACvB,OAAO;GACV;QACD,CAAC,CAAC,SAAS,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;;kBAGS,YAAY;OACvB,OAAO;IACV;YACD,CAAC,CAAC,IAAI,CAAA,uBAAuB,OAAO,QAAQ,CAAC;IAE/C,6EAA6E;IAC7E,4EAA4E;IAC5E,mEAAmE;IACnE,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAE9F,OAAO,WAAW,IAAI,SAAS,CAAC,aAAa,KAAK,OAAO;QACxD,CAAC,CAAC,IAAI,CAAA;wBACgB,WAAW,WAAW,SAAS,CAAC,aAAa;MAC/D,KAAK;;GAER;QACD,CAAC,CAAC,KAAK,CAAC;AACV,CAAC"}
|