@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-8dc1dc294

package/README.md

@@ -1,72 +1,174 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
 # UI5 Web Components - Main
 
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
- 
-|      Web Component       |       Tag name       |                       Module import                        |
-| ------------------------ | -------------------- | ---------------------------------------------------------- |
-| Avatar                   | `ui5-avatar`         | `import "@ui5/webcomponents/dist/Avatar.js";`              |
-| Badge                    | `ui5-badge`          | `import "@ui5/webcomponents/dist/Badge.js";`               |
-| Busy Indicator           | `ui5-busyindicator`  | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
-| Button                   | `ui5-button`         | `import "@ui5/webcomponents/dist/Button.js";`              |
-| Card                     | `ui5-card`           | `import "@ui5/webcomponents/dist/Card.js";`                |
-| Carousel                 | `ui5-carousel`       | `import "@ui5/webcomponents/dist/Carousel.js";`            |
-| Checkbox                 | `ui5-checkbox`       | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
-| ComboBox                 | `ui5-combobox`       | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
-| ComboBox Item            | `ui5-cb-item`        | comes with ui5-combobox                                    |
-| Date Picker              | `ui5-date-picker`    | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
-| Dialog                   | `ui5-dialog`         | `import "@ui5/webcomponents/dist/Dialog.js";`              |
-| File Uploader            | `ui5-file-uploader`  | `import "@ui5/webcomponents/dist/FileUploader.js";`        |
-| Icon                     | `ui5-icon`           | `import "@ui5/webcomponents/dist/Icon.js";`                |
-| Input                    | `ui5-input`          | `import "@ui5/webcomponents/dist/Input.js";`               |
-| Label                    | `ui5-label`          | `import "@ui5/webcomponents/dist/Label.js";`               |
-| Link                     | `ui5-link`           | `import "@ui5/webcomponents/dist/Link.js";`                |
-| List                     | `ui5-list`           | `import "@ui5/webcomponents/dist/List.js";`                |
-| List - Standard Item     | `ui5-li`             | `import "@ui5/webcomponents/dist/StandardListItem.js";`    |
-| List - Custom Item       | `ui5-li-custom`      | `import "@ui5/webcomponents/dist/CustomListItem.js";`      |
-| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
-| Message Strip            | `ui5-messagestrip`   | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |
-| Multi ComboBox           | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";`       |
-| Multi ComboBox Item      | `ui5-mcb-item`       | `import "@ui5/webcomponents/dist/MultiComboBoxItem.js";`   |
-| Panel                    | `ui5-panel`          | `import "@ui5/webcomponents/dist/Panel.js";`               |
-| Popover                  | `ui5-popover`        | `import "@ui5/webcomponents/dist/Popover.js";`             |
-| Radio Button             | `ui5-radiobutton`    | `import "@ui5/webcomponents/dist/RadioButton.js";`         |
-| Responsive Popover       | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
-| Select                   | `ui5-select`         | `import "@ui5/webcomponents/dist/Select.js";`              |
-| Select Option            | `ui5-option`         | comes with ui5-select                                      |
-| Segmented Button         | `ui5-segmentedbutton`|`import "@ui5/webcomponents/dist/SegmentedButton.js";`      |
-| Suggestion Item          | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";`       |
-| Switch                   | `ui5-switch`         | `import "@ui5/webcomponents/dist/Switch.js";`              |
-| Tab Container            | `ui5-tabcontainer`   | `import "@ui5/webcomponents/dist/TabContainer.js";`        |
-| Tab                      | `ui5-tab`            | `import "@ui5/webcomponents/dist/Tab.js";`                 |
-| Tab Separator            | `ui5-tab-separator`  | `import "@ui5/webcomponents/dist/TabSeparator.js";`        |
-| Table                    | `ui5-table`          | `import "@ui5/webcomponents/dist/Table.js";`               |
-| Table Column             | `ui5-table-column`   | `import "@ui5/webcomponents/dist/TableColumn.js";`         |
-| Table Row                | `ui5-table-row`      | `import "@ui5/webcomponents/dist/TableRow.js";`            |
-| Table Cell               | `ui5-table-cell`     | `import "@ui5/webcomponents/dist/TableCell.js";`           |
-| Textarea                 | `ui5-textarea`       | `import "@ui5/webcomponents/dist/TextArea.js";`            |
-| TimePicker               | `ui5-time-picker`    | `import "@ui5/webcomponents/dist/TimePicker.js";`          |
-| Title                    | `ui5-title`          | `import "@ui5/webcomponents/dist/Title.js";`               |
-| Toast                    | `ui5-toast`          | `import "@ui5/webcomponents/dist/Toast.js";`               |
-| Toggle Button            | `ui5-togglebutton`   | `import "@ui5/webcomponents/dist/ToggleButton.js";`        |
-
-For a complete list of all public module imports from the `main` package, click [here](../../docs/Public%20Module%20Imports.md#main):
+
+## Provided components
+
+| Web Component            | Tag name                    | Module import                                              |
+|--------------------------|-----------------------------|------------------------------------------------------------|
+| Avatar                   | `ui5-avatar`                | `import "@ui5/webcomponents/dist/Avatar.js";`              |
+| Avatar Group             | `ui5-avatar-group`          | `import "@ui5/webcomponents/dist/AvatarGroup.js";`         |
+| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| Breadcrumbs              | `ui5-breadcrumbs`           | `import "@ui5/webcomponents/dist/Breadcrumbs.js";`         |
+| Breadcrumbs Item         | `ui5-breadcrumbs-item`      | comes with `ui5-breadcrumbs`                               |
+| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| Busy Indicator           | `ui5-busy-indicator`        | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
+| Button                   | `ui5-button`                | `import "@ui5/webcomponents/dist/Button.js";`              |
+| Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |
+| Calendar Date            | `ui5-calendar-date`         | comes with `ui5-calendar`                                  |
+| Card                     | `ui5-card`                  | `import "@ui5/webcomponents/dist/Card.js";`                |
+| CardHeader               | `ui5-card-header`           | `import "@ui5/webcomponents/dist/CardHeader.js";`          |
+| Carousel                 | `ui5-carousel`              | `import "@ui5/webcomponents/dist/Carousel.js";`            |
+| Checkbox                 | `ui5-checkbox`              | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
+| Color Palette            | `ui5-color-palette`         | `import "@ui5/webcomponents/dist/ColorPalette.js";`        |
+| Color Palette Item       | `ui5-color-palette-item`    | comes with `ui5-color-palette`                             |
+| Color Palette Popover    | `ui5-color-palette-popover` | comes with `ui5-color-palette-popover`                     |
+| Color Picker             | `ui5-color-picker`          | `import "@ui5/webcomponents/dist/ComboPicker.js";`         |
+| ComboBox                 | `ui5-combobox`              | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
+| ComboBox Item            | `ui5-cb-item`               | comes with `ui5-combobox`                                  |
+| ComboBox Group Item      | `ui5-cb-group-item`         | comes with `ui5-combobox`                                  |
+| Date Picker              | `ui5-date-picker`           | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
+| Date Range Picker        | `ui5-daterange-picker`      | `import "@ui5/webcomponents/dist/DateRangePicker.js";`     |
+| Date Time Picker         | `ui5-datetime-picker`       | `import "@ui5/webcomponents/dist/DateTimePicker.js";`      |
+| Dialog                   | `ui5-dialog`                | `import "@ui5/webcomponents/dist/Dialog.js";`              |
+| File Uploader            | `ui5-file-uploader`         | `import "@ui5/webcomponents/dist/FileUploader.js";`        |
+| Icon                     | `ui5-icon`                  | `import "@ui5/webcomponents/dist/Icon.js";`                |
+| Input                    | `ui5-input`                 | `import "@ui5/webcomponents/dist/Input.js";`               |
+| Label                    | `ui5-label`                 | `import "@ui5/webcomponents/dist/Label.js";`               |
+| Link                     | `ui5-link`                  | `import "@ui5/webcomponents/dist/Link.js";`                |
+| List                     | `ui5-list`                  | `import "@ui5/webcomponents/dist/List.js";`                |
+| List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/StandardListItem.js";`    |
+| List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/CustomListItem.js";`      |
+| List - Group Header Item | `ui5-li-groupheader`        | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
+| Menu                     | `ui5-menu        `          | `import "@ui5/webcomponents/dist/Menu.js";`                |
+| Message Strip            | `ui5-message-strip`         | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |
+| Multi ComboBox           | `ui5-multi-combobox`        | `import "@ui5/webcomponents/dist/MultiComboBox.js";`       |
+| Multi ComboBox Item      | `ui5-mcb-item`              | comes with `ui5-multi-combobox`                            |
+| Multi ComboBox Group Item| `ui5-mcb-group-item`        | comes with `ui5-multi-combobox`                            |
+| Multi Input              | `ui5-multi-input`           | `import "@ui5/webcomponents/dist/MultiInput.js";`          |
+| Panel                    | `ui5-panel`                 | `import "@ui5/webcomponents/dist/Panel.js";`               |
+| Popover                  | `ui5-popover`               | `import "@ui5/webcomponents/dist/Popover.js";`             |
+| ProgressIndicator        | `ui5-progress-indicator`    | `import "@ui5/webcomponents/dist/ProgressIndicator.js";`   |
+| Radio Button             | `ui5-radio-button`          | `import "@ui5/webcomponents/dist/RadioButton.js";`         |
+| Range Slider             | `ui5-range-slider`          | `import "@ui5/webcomponents/dist/RangeSlider.js";`         |
+| Rating Indicator         | `ui5-rating-indicator`      | `import "@ui5/webcomponents/dist/RatingIndicator.js";`     |
+| Responsive Popover       | `ui5-responsive-popover`    | `import "@ui5/webcomponents/dist/ResponsivePopover.js";`   |
+| Segmented Button         | `ui5-segmented-button`      | `import "@ui5/webcomponents/dist/SegmentedButton.js";`     |
+| Segmented Button Item    | `ui5-segmented-button-item` | comes with `ui5-segmented-button `                         |
+| Select                   | `ui5-select`                | `import "@ui5/webcomponents/dist/Select.js";`              |
+| Select Option            | `ui5-option`                | comes with `ui5-select `                                   |
+| Slider                   | `ui5-slider`                | `import "@ui5/webcomponents/dist/Slider.js";`              |
+| Split Button             | `ui5-split-button`          | `import "@ui5/webcomponents/dist/SplitButton.js";`         |
+| Step Input               | `ui5-step-input`            | `import "@ui5/webcomponents/dist/StepInput.js";`           |
+| Suggestion Item          | `ui5-suggestion-item`       | comes with `InputSuggestions.js` feature - see below       |
+| Switch                   | `ui5-switch`                | `import "@ui5/webcomponents/dist/Switch.js";`              |
+| Tab Container            | `ui5-tabcontainer`          | `import "@ui5/webcomponents/dist/TabContainer.js";`        |
+| Tab                      | `ui5-tab`                   | `import "@ui5/webcomponents/dist/Tab.js";`                 |
+| Tab Separator            | `ui5-tab-separator`         | `import "@ui5/webcomponents/dist/TabSeparator.js";`        |
+| Table                    | `ui5-table`                 | `import "@ui5/webcomponents/dist/Table.js";`               |
+| Table Column             | `ui5-table-column`          | `import "@ui5/webcomponents/dist/TableColumn.js";`         |
+| Table Row                | `ui5-table-row`             | `import "@ui5/webcomponents/dist/TableRow.js";`            |
+| Table Group Row          | `ui5-table-group-row`       | `import "@ui5/webcomponents/dist/TableGroupRow.js";`       |
+| Table Cell               | `ui5-table-cell`            | `import "@ui5/webcomponents/dist/TableCell.js";`           |
+| Textarea                 | `ui5-textarea`              | `import "@ui5/webcomponents/dist/TextArea.js";`            |
+| TimePicker               | `ui5-time-picker`           | `import "@ui5/webcomponents/dist/TimePicker.js";`          |
+| Title                    | `ui5-title`                 | `import "@ui5/webcomponents/dist/Title.js";`               |
+| Toast                    | `ui5-toast`                 | `import "@ui5/webcomponents/dist/Toast.js";`               |
+| Toggle Button            | `ui5-toggle-button`         | `import "@ui5/webcomponents/dist/ToggleButton.js";`        |
+| Token                    | `ui5-token`                 | comes with `ui5-multi-input`                               |
+| Tree                     | `ui5-tree`                  | `import "@ui5/webcomponents/dist/Tree.js";`                |
+| Tree Item                | `ui5-tree-item`             | comes with `ui5-tree`                                      |
+
+## Provided assets
+
+`import "@ui5/webcomponents/dist/Assets.js";`
+
+| Assets | Module | Notes
+|------------|-----------|----------- 
+| `i18n`, `themes` | `@ui5/webcomponents/dist/Assets.js` | Theming parameters and translations for the components  <br/><br/> *Automatically imports also:<br/> `@ui5/webcomponents-localization/dist/Assets.js` <br/> and <br/> `@ui5/webcomponents-theming/dist/Assets.js`*
+
+## Provided features
+
+```js
+import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
+```
+
+| Affects                                           | Feature Import                                                       | Description                                                                                             |
+|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
+| `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Support for "more colors dialog" for the color palette component                                        |
+| `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Support for input suggestions while typing                                                              |
+| Multiple (`ui5-input`, `ui5-date-picker`, etc...) | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Support for using input components in forms                                                             |
+
+### Color Palette "More Colors" Feature
+
+```js
+import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
+```
+
+The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
+Since this is not always needed, in order to use this dialog, you must import the above feature.
+
+### Input Suggestions Feature
+
+```js
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
+```
+
+The `<ui5-input>` element acts as an `<input>` with the Fiori design and added functionality, such as value state.
+
+The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
+Since input suggestions may not always be needed, they do not come as part of the `<ui5-input>` itself.
+
+To enable the functionality, import the above module into your app. This will also automatically import `ui5-suggestion-item`
+for your convenience.
+
+### Form Support Feature
+
+```js
+import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+```
+
+HTML ```<form>``` only submits a couple of standard HTML elements such as `<input>` and `<textarea>` to name a few.
+
+Web Components that function as inputs, such as UI5's `<ui5-input>`, `<ui5-checkbox>`, `<ui5-textarea>` are therefore
+not submitted by the form out of the box.
+
+Generally, this is not an issue, as very few modern applications submit forms in the classic way.
+
+However, if you need to submit forms, you can import the module above, and it will enrich:
+- `ui5-input`
+- `ui5-textarea`
+- `ui5-checkbox`
+- `ui5-radio-button`
+- `ui5-date-picker`
+- `ui5-select`
+
+with functionality, allowing them to be submitted in forms (provided you set their <code>name</code> attribute) just as
+any standard HTML input element would be.
+
+#### How to submit a form
+
+There are two ways of submitting a form:
+1. The `ui5-button` element will be able to submit the closest ```form``` it's placed in, provided you set its `submits` attribute.
+2. Pressing Enter while a form control is focused.
+(Note: ```ui5-textarea``` is the only exception. If Enter is pressed while ```ui5-textarea``` is focused, it will result in a new line).
+
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/customI18n.js

@@ -0,0 +1,50 @@
+import { registerCustomI18nBundleGetter } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Third-party i18n library that has an async "load" function that fetches the i18n bundle and returns an object with a "get" method
+const i18n = {
+	load: async () => {
+		await Promise.resolve(); // fetch the data here
+		return {
+			get: (key, paramsArr, defaultText) => `key: ${key}, params: ${paramsArr.join(", ")}, defaultText: ${defaultText}`,
+		};
+	},
+};
+
+let bundle;
+registerCustomI18nBundleGetter(async packageName => {
+	if (!bundle) {
+		bundle = await i18n.load(); // potentially use the packageName parameter too
+	}
+	return {
+		getText: (keyObj, ...params) => {
+			const key = typeof keyObj === "string" ? keyObj : keyObj.key;
+			return bundle.get(key, params, keyObj.defaultText);
+		},
+	};
+});
+
+/*
+// Example with the i18next library
+
+import i18next from "i18next";
+registerCustomI18nBundleGetter(async packageName => {
+	await i18next.init({
+		lng: "en", // pass the desired language
+		debug: true,
+		resources: { // potentially use packageName to determine which translations to load - hardcoded for this example
+			en: {
+				translation: {
+					"key": "hello world",
+				},
+			},
+		},
+	});
+	return {
+		getText: (keyObj, ...params) => {
+			let key = typeof keyObj === "string" ? keyObj : keyObj.key;
+			key = key.replace(/{{/g, "{").replace(/}}/g, "}"); // the key will be with {{0}}, {{1}}, etc. placeholders
+			return i18next.t(key); // also pass the parameters, with keys "0", "1", etc.
+		},
+	};
+});
+*/

package/dist/Assets-static.d.ts

@@ -0,0 +1,4 @@
+import "@ui5/webcomponents-localization/dist/Assets-static.js";
+import "@ui5/webcomponents-theming/dist/Assets-static.js";
+import "./generated/json-imports/Themes-static.js";
+import "./generated/json-imports/i18n-static.js";

package/dist/Assets-static.js

@@ -1,6 +1,6 @@
 import "@ui5/webcomponents-localization/dist/Assets-static.js"; // CLDR
-import "@ui5/webcomponents-theme-base/dist/Assets-static.js"; // Theming
-
+import "@ui5/webcomponents-theming/dist/Assets-static.js"; // Theming
 // own main package assets
 import "./generated/json-imports/Themes-static.js";
 import "./generated/json-imports/i18n-static.js";
+//# sourceMappingURL=Assets-static.js.map

package/dist/Assets-static.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assets-static.js","sourceRoot":"","sources":["../src/Assets-static.ts"],"names":[],"mappings":"AAAA,OAAO,uDAAuD,CAAC,CAAC,OAAO;AACvE,OAAO,kDAAkD,CAAC,CAAC,UAAU;AAErE,0BAA0B;AAC1B,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC","sourcesContent":["import \"@ui5/webcomponents-localization/dist/Assets-static.js\"; // CLDR\nimport \"@ui5/webcomponents-theming/dist/Assets-static.js\"; // Theming\n\n// own main package assets\nimport \"./generated/json-imports/Themes-static.js\";\nimport \"./generated/json-imports/i18n-static.js\";\n"]}

package/dist/Assets.d.ts

@@ -0,0 +1,5 @@
+import "@ui5/webcomponents-localization/dist/Assets.js";
+import "@ui5/webcomponents-theming/dist/Assets.js";
+import "@ui5/webcomponents-icons/dist/Assets.js";
+import "./generated/json-imports/Themes.js";
+import "./generated/json-imports/i18n.js";

package/dist/Assets.js

@@ -1,7 +1,7 @@
 import "@ui5/webcomponents-localization/dist/Assets.js"; // CLDR
-import "@ui5/webcomponents-theme-base/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
 import "@ui5/webcomponents-icons/dist/Assets.js"; // Icons texts
-
 // own main package assets
 import "./generated/json-imports/Themes.js";
 import "./generated/json-imports/i18n.js";
+//# sourceMappingURL=Assets.js.map

package/dist/Assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assets.js","sourceRoot":"","sources":["../src/Assets.ts"],"names":[],"mappings":"AAAA,OAAO,gDAAgD,CAAC,CAAC,OAAO;AAChE,OAAO,2CAA2C,CAAC,CAAC,UAAU;AAC9D,OAAO,yCAAyC,CAAC,CAAC,cAAc;AAEhE,0BAA0B;AAC1B,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kCAAkC,CAAC","sourcesContent":["import \"@ui5/webcomponents-localization/dist/Assets.js\"; // CLDR\nimport \"@ui5/webcomponents-theming/dist/Assets.js\"; // Theming\nimport \"@ui5/webcomponents-icons/dist/Assets.js\"; // Icons texts\n\n// own main package assets\nimport \"./generated/json-imports/Themes.js\";\nimport \"./generated/json-imports/i18n.js\";\n"]}

package/dist/Avatar.d.ts

@@ -0,0 +1,247 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import AvatarSize from "./types/AvatarSize.js";
+import AvatarShape from "./types/AvatarShape.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * An image-like component that has different display options for representing images and icons
+ * in different shapes and sizes, depending on the use case.
+ *
+ * The shape can be circular or square. There are several predefined sizes, as well as an option to
+ * set a custom size.
+ *
+ * <br><br>
+ * <h3>Keyboard Handling</h3>
+ *
+ * <ul>
+ * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
+ * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
+ * </ul>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Avatar
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-avatar
+ * @since 1.0.0-rc.6
+ * @implements sap.ui.webc.main.IAvatar
+ * @public
+ */
+declare class Avatar extends UI5Element implements ITabbable {
+    /**
+     * Defines if the avatar is interactive (focusable and pressable).
+     * @type {boolean}
+     * @name sap.ui.webc.main.Avatar.prototype.interactive
+     * @defaultValue false
+     * @public
+     */
+    interactive: boolean;
+    /**
+     * Indicates if the elements is on focus
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Defines the name of the UI5 Icon, that will be displayed.
+     * <br>
+     * <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.
+     * <br>
+     * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
+     * <br><br>
+     * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
+     * <br>
+     * <pre>&lt;ui5-avatar icon="employee"></pre>
+     *
+     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     * @type {string}
+     * @name sap.ui.webc.main.Avatar.prototype.icon
+     * @defaultvalue ""
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines the displayed initials.
+     * <br>
+     * Up to three Latin letters can be displayed as initials.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Avatar.prototype.initials
+     * @defaultvalue ""
+     * @public
+     */
+    initials: string;
+    /**
+     * Defines the shape of the component.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>Circle</code></li>
+     * <li><code>Square</code></li>
+     * </ul>
+     * @type {sap.ui.webc.main.types.AvatarShape}
+     * @name sap.ui.webc.main.Avatar.prototype.shape
+     * @defaultvalue "Circle"
+     * @public
+     */
+    shape: AvatarShape;
+    /**
+     * Defines predefined size of the component.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>XS</code></li>
+     * <li><code>S</code></li>
+     * <li><code>M</code></li>
+     * <li><code>L</code></li>
+     * <li><code>XL</code></li>
+     * </ul>
+     * @type {sap.ui.webc.main.types.AvatarSize}
+     * @name sap.ui.webc.main.Avatar.prototype.size
+     * @defaultvalue "S"
+     * @public
+     */
+    size: AvatarSize;
+    /**
+     * @private
+     */
+    _size: AvatarSize;
+    /**
+     * Defines the background color of the desired image.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>Accent1</code></li>
+     * <li><code>Accent2</code></li>
+     * <li><code>Accent3</code></li>
+     * <li><code>Accent4</code></li>
+     * <li><code>Accent5</code></li>
+     * <li><code>Accent6</code></li>
+     * <li><code>Accent7</code></li>
+     * <li><code>Accent8</code></li>
+     * <li><code>Accent9</code></li>
+     * <li><code>Accent10</code></li>
+     * <li><code>Placeholder</code></li>
+     * </ul>
+     * @type {sap.ui.webc.main.types.AvatarColorScheme}
+     * @name sap.ui.webc.main.Avatar.prototype.colorScheme
+     * @defaultvalue "Accent6"
+     * @public
+     */
+    colorScheme: AvatarColorScheme;
+    /**
+     * @private
+     */
+    _colorScheme: AvatarColorScheme;
+    /**
+     * Defines the text alternative of the component.
+     * If not provided a default text alternative will be set, if present.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Avatar.prototype.accessibleName
+     * @defaultvalue ""
+     * @public
+     * @since 1.0.0-rc.7
+     */
+    accessibleName: string;
+    /**
+     * Defines the aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.
+     * <br><br>
+     * @type String
+     * @since 1.0.0-rc.15
+     * @protected
+     */
+    ariaHaspopup: string;
+    _tabIndex: string;
+    _hasImage: boolean;
+    /**
+     * Receives the desired <code>&lt;img&gt;</code> tag
+     *
+     * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
+     * <br /> <br />
+     * <code>
+     *		ui5-avatar:not(:defined) { <br />
+     *			&nbsp;visibility: hidden; <br />
+     *		} <br />
+     * </code>
+     * @type {HTMLElement}
+     * @name sap.ui.webc.main.Avatar.prototype.default
+     * @slot image
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    image: Array<HTMLElement>;
+    /**
+     * Defines the optional badge that will be used for visual affordance.
+     * <b>Note:</b> While the slot allows for custom badges, to achieve
+     * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
+     * in the corresponding <code>icon</code> slot, without text nodes.
+     * <br><br>
+     * Example:
+     * <br><br>
+     * &lt;ui5-avatar><br>
+     * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
+     * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
+     * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>
+     * &lt;/ui5-avatar>
+     * <br><br>
+     * <ui5-avatar initials="AB" color-scheme="Accent1">
+     * <ui5-badge slot="badge">
+     * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
+     * </ui5-badge>
+     * </ui5-avatar>
+     *
+     * @type {HTMLElement}
+     * @name sap.ui.webc.main.Avatar.prototype.badge
+     * @slot badge
+     * @public
+     * @since 1.7.0
+     */
+    badge: Array<HTMLElement>;
+    _onclick?: (e: MouseEvent) => void;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get tabindex(): string;
+    /**
+     * Returns the effective avatar size.
+     * @readonly
+     * @type {string}
+     * @defaultValue "S"
+     * @private
+     */
+    get _effectiveSize(): AvatarSize;
+    /**
+     * Returns the effective background color.
+     * @readonly
+     * @type {string}
+     * @defaultValue "Accent6"
+     * @private
+     */
+    get _effectiveBackgroundColor(): string;
+    get _role(): "button" | undefined;
+    get _ariaHasPopup(): string | undefined;
+    get validInitials(): string | null;
+    get accessibleNameText(): string | undefined;
+    get hasImage(): boolean;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    _setFallbackIcon(): string;
+    _checkInitials(): string;
+    _onClickHandler(e: MouseEvent): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onfocusout(): void;
+    _onfocusin(): void;
+    _getAriaHasPopup(): string | undefined;
+}
+export default Avatar;