From a265a65d8b48b4fcef84931a3ca0b7ad4278283e Mon Sep 17 00:00:00 2001 From: Nikoleta Ivanova <31706628+nikoletavnv@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:59:34 +0200 Subject: [PATCH 01/79] feat(ui5-input): prevent suggestion-item-select event per suggestion item (#7940) * feat(ui5-input): prevent suggestion-item-select * feat(ui5-input): prevent suggestion item select * feat(ui5-input): close suggestions popover on group item enter * feat(ui5-input): close suggestions popover on group item enter * feat(ui5-input): add tests for preventing suggestion-item-select event * feat(ui5-input): keep old order of firing events when suggestion item is selected * feat(ui5-input): keep old order of firing events when suggestion item is selected --- packages/main/src/Input.ts | 52 +++++++++++---- .../main/src/features/InputSuggestions.ts | 5 ++ packages/main/test/pages/Input.html | 16 +++++ packages/main/test/specs/Input.spec.js | 64 ++++++++++++++++++- 4 files changed, 121 insertions(+), 16 deletions(-) diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 0ff4359f1edf..5b2a0b089b01 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -626,7 +626,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { hasSuggestionItemSelected: boolean; valueBeforeItemSelection: string; valueBeforeItemPreview: string - suggestionSelectionCanceled: boolean; + suggestionSelectionCancelled: boolean; previousValue: string; firstRendering: boolean; typedInValue: string; @@ -664,7 +664,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { this.valueBeforeItemPreview = ""; // Indicates if the user selection has been canceled with [ESC]. - this.suggestionSelectionCanceled = false; + this.suggestionSelectionCancelled = false; // tracks the value between focus in and focus out to detect that change event should be fired. this.previousValue = ""; @@ -870,7 +870,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { } _handleEnter(e: KeyboardEvent) { - const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e)); + const suggestionItemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e)); + const innerInput = this.getInputDOMRefSync()!; // Check for autocompleted item const matchingItem = this.suggestionItems.find(item => { @@ -881,7 +882,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { const itemText = matchingItem.text ? matchingItem.text : (matchingItem.textContent || ""); innerInput.setSelectionRange(itemText.length, itemText.length); - if (!itemPressed) { + if (!suggestionItemPressed) { this.selectSuggestion(matchingItem, true); this.open = false; } @@ -891,7 +892,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { innerInput.setSelectionRange(this.value.length, this.value.length); } - if (!itemPressed) { + if (!suggestionItemPressed) { this.lastConfirmedValue = this.value; if (this.FormSupport) { @@ -949,9 +950,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { // Restore the value. this.value = this.typedInValue || this.valueBeforeItemPreview; - // Mark that the selection has been canceled, so the popover can close + // Mark that the selection has been cancelled, so the popover can close // and not reopen, due to receiving focus. - this.suggestionSelectionCanceled = true; + this.suggestionSelectionCancelled = true; this.focused = true; return; @@ -1100,7 +1101,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { ]; this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead; - this.suggestionSelectionCanceled = false; + this.suggestionSelectionCancelled = false; if (e instanceof InputEvent) { // ---- Special cases of numeric Input ---- @@ -1292,14 +1293,19 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { this.hasSuggestionItemSelected = true; + const valueOriginal = this.value; + const valueBeforeItemSelectionOriginal = this.valueBeforeItemSelection; + const lastConfirmedValueOriginal = this.lastConfirmedValue; + const performTextSelectionOriginal = this._performTextSelection; + const typedInValueOriginal = this.typedInValue; + const previousValueOriginal = this.previousValue; + if (fireInput) { this.value = itemText; this.valueBeforeItemSelection = itemText; this.lastConfirmedValue = itemText; this._performTextSelection = true; - this.hasSuggestionItemSelected = true; - this.value = itemText; this.fireEvent(INPUT_EVENTS.CHANGE); @@ -1313,9 +1319,29 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { } this.valueBeforeItemPreview = ""; - this.suggestionSelectionCanceled = false; - - this.fireEvent(INPUT_EVENTS.SUGGESTION_ITEM_SELECT, { item }); + this.suggestionSelectionCancelled = false; + + // Fire suggestion-item-select event after input change events for backward compatibility, but revert all input properties set before suggestion was prevented. + // For v2.0 this code will be reworked. + const isCancelledByUser = !this.fireEvent(INPUT_EVENTS.SUGGESTION_ITEM_SELECT, { item }, true); + + if (isCancelledByUser) { + this.Suggestions?._clearSelectedSuggestionAndAccInfo(); + this.hasSuggestionItemSelected = false; + this.suggestionSelectionCancelled = true; + + if (fireInput) { + // revert properties set during fireInput + if (itemText === this.value) { // If no chnages were made to the input value after suggestion-item-select was prevented - revert value to the original text + this.value = valueOriginal; + } + this.valueBeforeItemSelection = valueBeforeItemSelectionOriginal; + this.lastConfirmedValue = lastConfirmedValueOriginal; + this._performTextSelection = performTextSelectionOriginal; + this.typedInValue = typedInValueOriginal; + this.previousValue = previousValueOriginal; + } + } this.isTyping = false; this.openOnMobile = false; diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 847b2429429c..4ae46ea0fcbd 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -656,6 +656,11 @@ class Suggestions { this.component._isValueStateFocused = false; } + _clearSelectedSuggestionAndAccInfo() { + this.accInfo = undefined; + this.selectedItemIndex = 0; + } + static get dependencies() { return [ SuggestionItem, diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index b628c2707797..60e40d016982 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -122,6 +122,13 @@

Input with disabled autocomplete (type-ahead)

Condensed +

Input with disabled autocomplete and preventable suggestion select

+ + Cozy + Compact + Condensed + +

'change' event result

@@ -752,6 +759,15 @@

Input - change event handling

}); document.getElementById("change-event-value").addEventListener("ui5-change", event => event.target.value = ""); + + const inputWithPreventableSelection = document.getElementById("input-prevent-suggestion-select"); + inputWithPreventableSelection.addEventListener("ui5-suggestionItemSelect", (e) => { + const selectedItemText = e.detail.item.text || e.detail.item.textContent; + if(selectedItemText === "Cozy"){ + e.preventDefault(); + inputWithPreventableSelection.value = "test test"; + } + }); diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index ff27b38cebab..336276fa17cf 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -735,8 +735,6 @@ describe("Input general interaction", () => { }); it("Tests disabled autocomplete(type-ahead)", async () => { - let hasSelection; - const input = await browser.$("#input-disabled-autocomplete").shadow$("input"); await input.click(); @@ -1519,6 +1517,66 @@ describe("XSS tests for suggestions", () => { }); }); +describe("Prevent suggestion-item-select event", () => { + let input; + let SUGGESTION_TEXT; + const INPUT_ID_SELECTOR = "#input-prevent-suggestion-select"; + + beforeEach(async () => { + await browser.url(`test/pages/Input.html`); + + input = await browser.$(INPUT_ID_SELECTOR); + }); + + it("User can prevent suggested-item-select on desired item", async () => { + SUGGESTION_TEXT = "Cozy"; + + await input.click(); + await input.keys(SUGGESTION_TEXT.at(0)); + + const staticAreaItemClassName = + await browser.getStaticAreaItemClassName(INPUT_ID_SELECTOR); + const respPopover = await browser + .$(`.${staticAreaItemClassName}`) + .shadow$("ui5-responsive-popover"); + + // Select first suggestion item that has event prevent + const firstSuggestion = await respPopover + .$("ui5-list") + .$("ui5-li-suggestion-item"); + await firstSuggestion.click(); + + assert.strictEqual( + await input.getProperty("value"), + "test test", + "Prevent suggestion-item-select event does not work" + ); + }); + + it("Suggestion selection works as usual for items that do not match event prevent criterias defined by user", async () => { + SUGGESTION_TEXT = "Compact"; + + await input.click(); + await input.keys(SUGGESTION_TEXT.at(0)); + + const staticAreaItemClassName = + await browser.getStaticAreaItemClassName(INPUT_ID_SELECTOR); + const respPopover = await browser + .$(`.${staticAreaItemClassName}`) + .shadow$("ui5-responsive-popover"); + + const secondSuggestion = await respPopover + .$("ui5-list") + .$$("ui5-li-suggestion-item")[1]; + await secondSuggestion.click(); + + assert.strictEqual( + await input.getProperty("value"), + SUGGESTION_TEXT, + "Event suggestion-item-select works as expected for items without event prevention" + ); + }); +}); describe("Lazy loading", () => { beforeEach(async () => { @@ -1578,4 +1636,4 @@ describe("Lazy loading", () => { assert.strictEqual(await respPopover.getProperty("opened"), true, "Picker should not be open"); }); -}); +}); \ No newline at end of file From 0cbbd160ba5b578795259e59aa187359385dc4b2 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 12 Dec 2023 15:00:07 +0200 Subject: [PATCH 02/79] feat(ui5-tabcontainer): add `tabstrip` Shadow Part (#7989) adds tabstrip CSS Shadow Part to allow styling of the respective element - mostly its padding. Fixes: #6035 --- packages/main/src/TabContainer.hbs | 1 + packages/main/src/TabContainer.ts | 1 + packages/main/test/pages/TabContainer.html | 31 ++++++++++++++++++++++ 3 files changed, 33 insertions(+) diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index c1b57406629d..7e664e0c752d 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -6,6 +6,7 @@ class="{{classes.header}}" id="{{_id}}-header" @focusin="{{_onHeaderFocusin}}" + part="tabstrip" >
* The ui5-tabcontainer exposes the following CSS Shadow Parts: *
    + *
  • tabstrip - Used to style the tabstrip of the component
    • *
  • content - Used to style the content of the component
    • *
* diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 627d3d5a7ef7..fcf42d63cbcd 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -807,6 +807,37 @@

Add new selected tab programmatically

+ +
+

Custom padding

+ + + + Button 1 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 5 + + Tab Content + +
+ - - - - - Open ColorPalettePopover - + + Test case 1 - Default Color Button to be focused + Open + + + + + + + + + + + + + + + + Test case 2 - Default Color works + Open + + + + + + + + + + + + + + + + Test case 3 - Arrow Down to select displayed color + Open + + + + + + + + + + + + + + + + + Test case 4 - Arrow Up focuses MoreColors button + Open + + + + + + + + + + + + + + + + Test case 5 - Tests navigation with recent colors + Open + @@ -37,8 +98,11 @@ - Open ColorPalettePopover - + Test case 6 - close + Open + + Press + @@ -53,8 +117,9 @@ - Open ColorPalettePopover - + Only Colors + Open + @@ -69,8 +134,9 @@ - Open ColorPalettePopover - + show-default-color + Open + @@ -85,8 +151,9 @@ - Open ColorPalettePopover - + show-more-colors and show-default-color + Open + @@ -101,8 +168,9 @@ - Open ColorPalettePopover - + show-recent-colors, show-more-colors and show-default-color + Open + @@ -116,24 +184,53 @@ + diff --git a/packages/main/test/specs/ColorPalettePopover.spec.js b/packages/main/test/specs/ColorPalettePopover.spec.js index 7e4088df2c4c..488a30ef2387 100644 --- a/packages/main/test/specs/ColorPalettePopover.spec.js +++ b/packages/main/test/specs/ColorPalettePopover.spec.js @@ -6,92 +6,148 @@ describe("ColorPalette interactions", () => { }); it("Test if focusing first element works on initial open", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + const colorPaletteButton = await browser.$("#colorPaletteBtnTest"); + + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest"); const responsivePopover = await colorPalettePopover.shadow$("[ui5-responsive-popover]") const colorPalette = await responsivePopover.$("[ui5-color-palette]"); const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); - assert.ok(await defaultButton.getProperty("focused"), "Check if the first element is focused"); + // assert - default btn is focused + assert.ok(await defaultButton.getProperty("focused"), "The first element is focused"); + + // act - close popover + await defaultButton.click(); }); it("Test if default color functionality works", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); + const DEFAULT_COLOR = "green"; + const colorPaletteButton = await browser.$("#colorPaletteBtnTest2"); - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest2"); const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); + // act - activate default color await defaultButton.keys("Space"); - assert.strictEqual(await colorPalette.getProperty("selectedColor"), "green", "Check if selected value is darkgreen"); + // assert - "green" is selected as default color + assert.strictEqual(await colorPalette.getProperty("selectedColor"), DEFAULT_COLOR, "The selected value is green"); }); it("Test if keyboard navigation on elements works", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + const EXPTECTED_COLOR = "pink" + const colorPaletteButton = await browser.$("#colorPaletteBtnTest3"); + + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest3"); const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); const colorPaletteEntries = await colorPalette.shadow$$("[ui5-color-palette-item]"); const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); const item = colorPaletteEntries[0]; + // act - navigate to a color with "ArrowDown" await defaultButton.keys("ArrowDown"); await item.keys("Space"); - assert.strictEqual(await colorPalette.getProperty("selectedColor"), "pink", "Check if selected value is pink"); + // assert - "pink" is selected with "SPACE" + assert.strictEqual(await colorPalette.getProperty("selectedColor"), EXPTECTED_COLOR, "The selected value is pink"); }); it("Test if keyboard navigation on elements works", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + const colorPaletteButton = await browser.$("#colorPaletteBtnTest4"); + + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest4"); const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); const moreColorsButton = await colorPalette.shadow$(".ui5-cp-more-colors"); const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); await defaultButton.keys("ArrowUp"); - assert.ok(await moreColorsButton.getProperty("focused"), "Check if more colors button is focused"); + // assert - MoreColors button is focused + assert.ok(await moreColorsButton.getProperty("focused"), "Button 'MoreColors' is focused"); + + // act - close popover + await defaultButton.click(); }); it("Tests navigation with recent colors", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); - - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + const colorPaletteButton = await browser.$("#colorPaletteBtnTest5"); + + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest5"); const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); const moreColorsButton = await colorPalette.shadow$(".ui5-cp-more-colors"); const firstRecentColorsElement = await colorPalette.shadow$(".ui5-cp-recent-colors-container [ui5-color-palette-item]"); + // act - press default color btn and re-open color palette popover await defaultButton.keys("Space"); - await colorPaletteButton.click(); + // act - navigate to recent colors await defaultButton.keys("ArrowUp"); await firstRecentColorsElement.keys("ArrowUp"); + // assert - MoreColors is focused assert.ok(await moreColorsButton.getProperty("focused"), "Check if more colors button is focused"); + + // act - close popover + await defaultButton.click(); + }); + + it("Test 'close' event fired when popover closes", async () => { + const colorPaletteButton = await browser.$("#colorPaletteBtnTest6"); + const btnFocusOut = await browser.$("#btnFocusOut"); + const inpOpenChangeCounter = await browser.$("#inpOpenChangeCounter"); + + // act - open color palette popover and click outside + await colorPaletteButton.click(); + await btnFocusOut.click(); + + // assert + assert.ok(await inpOpenChangeCounter.getProperty("value"), "1", "Event 'close' fired when popover closes."); + + // act - open color palette popover + await colorPaletteButton.click(); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest6"); + const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); + const defaultButton = await colorPalette.shadow$(".ui5-cp-default-color-button"); + + // act - select default color + await defaultButton.click(); + + // assert + assert.ok(await inpOpenChangeCounter.getProperty("value"), "2", "Event 'close' fired when popover closes."); }); it("Test attribute propagation propagation", async () => { - await browser.url(`test/pages/ColorPalettePopover.html`); + const colorPaletteButton = await browser.$("#colorPaletteBtnTest"); - const colorPaletteButton = await browser.$("#colorPaletteBtn"); + // act - open color palette popover await colorPaletteButton.click(); - const colorPalettePopover = await browser.$("[ui5-color-palette-popover]"); + + const colorPalettePopover = await browser.$("#colorPalettePopoverTest"); const colorPalette = await colorPalettePopover.shadow$("[ui5-responsive-popover]").$("[ui5-color-palette]"); + // assert assert.ok(await colorPalette.getProperty("showDefaultColor"), "Check if default color is on"); assert.ok(await colorPalette.getProperty("showRecentColors"), "Check if recent colors is on"); assert.ok(await colorPalette.getProperty("showMoreColors"), "Check if more colors is on"); - }); + }) + }); From 9ec3b7a6a73d76f61a72f09add7d2fce7ea59b6f Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 15 Dec 2023 19:45:37 +0200 Subject: [PATCH 08/79] chore(vsd): remove obsolete dependency (#8001) chore: remove obsolete dependency --- packages/fiori/src/ViewSettingsDialog.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 1055d6693f52..2bbcfd8163c5 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -19,7 +19,6 @@ import Title from "@ui5/webcomponents/dist/Title.js"; import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js"; import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"; -import Bar from "./Bar.js"; import ViewSettingsDialogMode from "./types/ViewSettingsDialogMode.js"; import "@ui5/webcomponents-icons/dist/sort.js"; import "@ui5/webcomponents-icons/dist/filter.js"; @@ -114,7 +113,6 @@ type VSDInternalSettings = { styles: viewSettingsDialogCSS, template: ViewSettingsDialogTemplate, dependencies: [ - Bar, Button, Title, Dialog, From 24f195579a33361c0c1d272503b7da8a0d20da11 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 18 Dec 2023 11:31:35 +0200 Subject: [PATCH 09/79] ci: add reset gh-pages workflow (#8015) --- .github/workflows/reset-gh-pages.yaml | 30 +++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/reset-gh-pages.yaml diff --git a/.github/workflows/reset-gh-pages.yaml b/.github/workflows/reset-gh-pages.yaml new file mode 100644 index 000000000000..49dec8cc8997 --- /dev/null +++ b/.github/workflows/reset-gh-pages.yaml @@ -0,0 +1,30 @@ +name: Reset Github Pages + +on: + workflow_dispatch: + +jobs: + build-and-release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + token: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }} + fetch-depth: 0 + + - name: Reset gh-pages git history + env: + NPM_USERNAME: ${{ secrets.NPM_USER }} + NPM_EMAIL: ${{ secrets.NPM_EMAIL }} + NPM_AUTH_TOKEN: ${{ secrets.NPM_RELEASE_AUTH_TOKEN }} + GH_TOKEN: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }} + run: | + git config user.name "${{ secrets.UI5_WEBCOMP_BOT_NAME }}" + git config user.email "${{ secrets.UI5_WEBCOMP_BOT_EMAIL }}" + git checkout -b gh-pages origin/gh-pages + git checkout -f + git add -A + git commit -am "reset history" + git branch -D gh-pages + git branch -m gh-pages + git push -f origin gh-pages From 630f73ceb4bef7c312604e6b279f3b4c6e94580a Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 18 Dec 2023 12:11:16 +0200 Subject: [PATCH 10/79] chore: update reset-gh-pages --- .github/workflows/reset-gh-pages.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/reset-gh-pages.yaml b/.github/workflows/reset-gh-pages.yaml index 49dec8cc8997..3a464e56ec4f 100644 --- a/.github/workflows/reset-gh-pages.yaml +++ b/.github/workflows/reset-gh-pages.yaml @@ -22,7 +22,7 @@ jobs: git config user.name "${{ secrets.UI5_WEBCOMP_BOT_NAME }}" git config user.email "${{ secrets.UI5_WEBCOMP_BOT_EMAIL }}" git checkout -b gh-pages origin/gh-pages - git checkout -f + git checkout --orphan tmp-gh-pages git add -A git commit -am "reset history" git branch -D gh-pages From 12bfd13f44bbe8f3def4809ae89f75b343f2b863 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 18 Dec 2023 13:11:41 +0200 Subject: [PATCH 11/79] chore: auto-run reset-ghithub-pages every day (#8016) --- .github/workflows/reset-gh-pages.yaml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/reset-gh-pages.yaml b/.github/workflows/reset-gh-pages.yaml index 3a464e56ec4f..789d4273db27 100644 --- a/.github/workflows/reset-gh-pages.yaml +++ b/.github/workflows/reset-gh-pages.yaml @@ -1,10 +1,11 @@ name: Reset Github Pages on: - workflow_dispatch: + schedule: + - cron: "00 08 * * *" jobs: - build-and-release: + reset-gh-pages: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 From 8eeb8b36f4d1e52ef0daa30e20b68d3bee719020 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Mon, 18 Dec 2023 15:23:34 +0200 Subject: [PATCH 12/79] docs: base class documentation (#8018) --- packages/tools/lib/jsdoc/preprocess.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/lib/jsdoc/preprocess.js b/packages/tools/lib/jsdoc/preprocess.js index bddbe0e05f3e..601e003d259b 100644 --- a/packages/tools/lib/jsdoc/preprocess.js +++ b/packages/tools/lib/jsdoc/preprocess.js @@ -116,7 +116,7 @@ const processComponentFile = async (fileName) => { const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js"); let jsFileContent = `${await fs.readFile(destFileName)}`; - const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm"); + const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm"); let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp); if (!classDefinitionMatch) { return; // not a file, generated by typescript, nothing to do here From 02ea9a451635b9b0d75833889e7cdf3c022cd137 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 18 Dec 2023 21:18:12 +0200 Subject: [PATCH 13/79] feat(ui5-select): introduce `readonly` state (#7950) Introduces readonly state to the Select web component and align the readonly styles for all input fields to the latest specs. Changes in Select API: new property readonly; VD: respective visual styling for readonly state, dropdown icon is not displayed; InteractionDesign: dropdown remains always closed, no changes in selection allowed; a11y: new aria attribute aria-readonly true|false accordingly. Fixes: #7727 --- packages/main/src/Select.hbs | 13 ++++--- packages/main/src/Select.ts | 39 ++++++++++++++++--- packages/main/src/themes/Input.css | 8 ++++ .../main/src/themes/base/Input-parameters.css | 2 + .../themes/sap_horizon/Input-parameters.css | 2 + .../sap_horizon_dark/Input-parameters.css | 2 + .../sap_horizon_dark_exp/Input-parameters.css | 2 + .../sap_horizon_exp/Input-parameters.css | 2 + packages/main/test/pages/Select.html | 9 ++++- packages/main/test/pages/SelectMenu.html | 36 +++++++++++++++++ packages/main/test/specs/Select.spec.js | 27 +++++++++++++ .../_stories/main/Select/Select.stories.ts | 6 +++ 12 files changed, 137 insertions(+), 11 deletions(-) diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 8b378dd2848d..839d44942e10 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -19,6 +19,7 @@ aria-describedby="{{valueStateTextId}}" aria-disabled="{{isDisabled}}" aria-required="{{required}}" + aria-readonly="{{readonly}}" aria-expanded="{{_isPickerOpen}}" aria-roledescription="{{_ariaRoleDescription}}" @keydown="{{_onkeydown}}" @@ -34,11 +35,13 @@ {{/if}}
- + {{#unless readonly}} + + {{/unless}} {{#if hasValueState}} {{valueStateText}} diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 4e257d76ad96..2c760c8158b0 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -286,6 +286,21 @@ class Select extends UI5Element implements IFormElement { @property({ type: Boolean }) required!: boolean; + /** + * Defines whether the component is read-only. + *

+ * Note: A read-only component is not editable, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @name sap.ui.webc.main.Select.prototype.readonly + * @defaultvalue false + * @since 1.21.0 + * @public + */ + @property({ type: Boolean }) + readonly!: boolean; + /** * Defines the accessible ARIA name of the component. * @@ -589,7 +604,7 @@ class Select extends UI5Element implements IFormElement { } async _toggleRespPopover() { - if (this.disabled) { + if (this.disabled || this.readonly) { return; } @@ -739,7 +754,7 @@ class Select extends UI5Element implements IFormElement { } _handleKeyboardNavigation(e: KeyboardEvent) { - if (isEnter(e)) { + if (isEnter(e) || this.readonly) { return; } @@ -790,13 +805,22 @@ class Select extends UI5Element implements IFormElement { _handleHomeKey(e: KeyboardEvent) { e.preventDefault(); + + if (this.readonly) { + return; + } + this._changeSelectedItem(this._selectedIndex, 0); } _handleEndKey(e: KeyboardEvent) { - const lastIndex = this.selectOptions.length - 1; - e.preventDefault(); + + if (this.readonly) { + return; + } + + const lastIndex = this.selectOptions.length - 1; this._changeSelectedItem(this._selectedIndex, lastIndex); } @@ -870,11 +894,16 @@ class Select extends UI5Element implements IFormElement { } _handleArrowNavigation(e: KeyboardEvent) { + e.preventDefault(); + + if (this.readonly) { + return; + } + let nextIndex = -1; const currentIndex = this._selectedIndex; const isDownKey = isDown(e); - e.preventDefault(); if (isDownKey) { nextIndex = this._getNextOptionIndex(); } else { diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 94a3b435b93a..5d1ea0a06faa 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -51,6 +51,14 @@ right: var(--_ui5_input_focus_offset); } +:host([focused][readonly]:not([opened])) .ui5-input-focusable-element::after { + top: var(--_ui5_input_readonly_focus_offset); + bottom: var(--_ui5_input_readonly_focus_offset); + left: var(--_ui5_input_readonly_focus_offset); + right: var(--_ui5_input_readonly_focus_offset); + border-radius: var(--_ui5_input_readonly_focus_border_radius); +} + .ui5-input-root::before { content: ""; position: absolute; diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 7df445341f97..d2c4666496c5 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -9,6 +9,7 @@ --_ui5_input_background_color: var(--sapField_Background); --_ui5_input_border_radius: var(--sapField_BorderCornerRadius); --_ui5_input_focus_border_radius: 0; + --_ui5_input_readonly_focus_border_radius: 0; --_ui5-input-border: 2px solid transparent; /* The value of this variable defaults to sap_horizon theme, because if it defaults to fiori, then a flickering of the border is present*/ --_ui5_input_placeholder_style: italic; --_ui5_input_placeholder_color: var(--sapField_PlaceholderTextColor); @@ -62,6 +63,7 @@ --_ui5-input-value-state-information-border-width: 1px; --_ui5-input-background-image: none; --_ui5_input_focus_offset: 1px; + --_ui5_input_readonly_focus_offset: 1px; --ui5_input_focus_pseudo_element_content: ''; --_ui5_input_value_state_error_warning_placeholder_font_weight: normal; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css index 12085851c879..487061e1be67 100644 --- a/packages/main/src/themes/sap_horizon/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css index 12085851c879..487061e1be67 100644 --- a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css index 60006362adc5..ea0d1835f1fa 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -14,6 +15,7 @@ --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_icon_min_width: 2.125rem; --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css index 2edfd89b4e86..e3975f1e4d32 100644 --- a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index 58b7fe68ca9c..4b203d6d6364 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -22,7 +22,6 @@ Restore Items click -

Content size

@@ -69,6 +68,14 @@

Success Select

Disabled Select

+

Readonly Select

+ + Cozy + Compact + Condensed + + +

Input with suggestions

diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index b1d11b252466..08632eec990e 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -38,6 +38,8 @@ + +
@@ -612,6 +614,40 @@ + + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + + + `, +]; +Basic.parameters = { + docs: { + story: { + inline: false, + iframeHeight: "500px", + }, + } +}; diff --git a/packages/playground/_stories/fiori/ViewSettingsDialog/FilterItemOption/FilterItemOption.stories.ts b/packages/playground/_stories/fiori/ViewSettingsDialog/FilterItemOption/FilterItemOption.stories.ts new file mode 100644 index 000000000000..1eb95a1dc8bf --- /dev/null +++ b/packages/playground/_stories/fiori/ViewSettingsDialog/FilterItemOption/FilterItemOption.stories.ts @@ -0,0 +1,63 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs"; + +import type FilterItemOption from "@ui5/webcomponents-fiori/dist/FilterItemOption.js"; + +const component = "ui5-filter-item-option"; + +export default { + title: "Fiori/View Settings Dialog/Filter Item Option", + component: "FilterItemOption", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + + + +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Current filter item option", + selected: true +}; +Basic.decorators = [ + (story) => html`Open ViewSettingsDialog + ${story()} + + `, +]; +Basic.parameters = { + docs: { + story: { + inline: false, + iframeHeight: "500px", + }, + } +}; diff --git a/packages/playground/_stories/fiori/ViewSettingsDialog/SortItem/SortItem.stories.ts b/packages/playground/_stories/fiori/ViewSettingsDialog/SortItem/SortItem.stories.ts new file mode 100644 index 000000000000..478d4a828482 --- /dev/null +++ b/packages/playground/_stories/fiori/ViewSettingsDialog/SortItem/SortItem.stories.ts @@ -0,0 +1,53 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs"; + +import type SortItem from "@ui5/webcomponents-fiori/dist/SortItem.js"; + +const component = "ui5-sort-item"; + +export default { + title: "Fiori/View Settings Dialog/Sort Item", + component: "SortItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Current sort item", +}; +Basic.decorators = [ + (story) => html`Open ViewSettingsDialog + ${story()} + + `, +]; +Basic.parameters = { + docs: { + story: { + inline: false, + iframeHeight: "500px", + }, + } +}; diff --git a/packages/playground/_stories/fiori/ViewSettingsDialog/ViewSettingsDialog.stories.ts b/packages/playground/_stories/fiori/ViewSettingsDialog/ViewSettingsDialog.stories.ts index c27abb62a04d..c23046e32405 100644 --- a/packages/playground/_stories/fiori/ViewSettingsDialog/ViewSettingsDialog.stories.ts +++ b/packages/playground/_stories/fiori/ViewSettingsDialog/ViewSettingsDialog.stories.ts @@ -14,7 +14,7 @@ import type ViewSettingsDialog from "@ui5/webcomponents-fiori/dist/ViewSettingsD const component = "ui5-view-settings-dialog"; export default { - title: "Fiori/ViewSettingsDialog", + title: "Fiori/View Settings Dialog", component: "ViewSettingsDialog", subcomponents: {'SortItem' : 'SortItem', 'FilterItem' : 'FilterItem', 'FilterItemOption' : 'FilterItemOption'}, parameters: { diff --git a/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts b/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts index e699b573a981..81d5c9e0d2c4 100644 --- a/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts +++ b/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts @@ -13,9 +13,6 @@ const component = "ui5-wizard"; export default { title: "Fiori/Wizard", component: "Wizard", - subcomponents: { - WizardStep: 'WizardStep' - }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/fiori/Wizard/WizardStep/WizardStep.stories.ts b/packages/playground/_stories/fiori/Wizard/WizardStep/WizardStep.stories.ts new file mode 100644 index 000000000000..356dc7d673d7 --- /dev/null +++ b/packages/playground/_stories/fiori/Wizard/WizardStep/WizardStep.stories.ts @@ -0,0 +1,58 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; + +import argTypes, { StoryArgsSlots, componentInfo } from "./argTypes.js"; + +import { DocsPage } from "../../../../.storybook/docs"; + +// @ts-ignore +import type WizardStep from "@ui5/webcomponents-fiori/dist/WizardStep.js"; +import { UI5StoryArgs } from "../../../../types.js"; + +const component = "ui5-wizard-step"; + +export default { + title: "Fiori/Wizard/Wizard Step", + component: "WizardStep", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + + +const Template: UI5StoryArgs = (args) => { + return html` + + + ${unsafeHTML(args.default)} + +`; +}; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + titleText: "Product type", + icon: "product", + default: `
+ 1. Product Type
+ + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. +
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. + +
+Step 2` +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts index 7acace0250ad..19e5c2b8f402 100644 --- a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts +++ b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts @@ -10,14 +10,12 @@ import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; import type Breadcrumbs from "@ui5/webcomponents/dist/Breadcrumbs.js"; -import BreadcrumbsDesign from "@ui5/webcomponents/dist/types/BreadcrumbsDesign.js"; const component = "ui5-breadcrumbs"; export default { title: "Main/Breadcrumbs", component: "Breadcrumbs", - subcomponents: { BreadcrumbsItem: "BreadcrumbsItem" }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }), diff --git a/packages/playground/_stories/main/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.stories.ts b/packages/playground/_stories/main/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.stories.ts new file mode 100644 index 000000000000..a0cbc22f5a8b --- /dev/null +++ b/packages/playground/_stories/main/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.stories.ts @@ -0,0 +1,40 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js"; + +const component = "ui5-breadcrumbs-item"; + +export default { + title: "Main/Breadcrumbs/Breadcrumbs Item", + component: "BreadcrumbsItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }), + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => + html` + Root Page + ${unsafeHTML(args.default)} + Current Page +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"] +Basic.args = { + default: `Parent page`, + href: "https://www.sap.com", + target: "_blank" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Calendar/Calendar.stories.ts b/packages/playground/_stories/main/Calendar/Calendar.stories.ts index f96a64699764..647502572312 100644 --- a/packages/playground/_stories/main/Calendar/Calendar.stories.ts +++ b/packages/playground/_stories/main/Calendar/Calendar.stories.ts @@ -10,7 +10,6 @@ import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; import type Calendar from "@ui5/webcomponents/dist/Calendar.js"; -import CalendarSelectionMode from "@ui5/webcomponents/dist/types/CalendarSelectionMode.js"; import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js"; @@ -19,7 +18,6 @@ const component = "ui5-calendar"; export default { title: "Main/Calendar", component: "Calendar", - subcomponents: {'CalendarDate' : 'CalendarDate'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) @@ -45,7 +43,7 @@ export const Basic = Template.bind({}); export const Bounds = Template.bind({}); Bounds.storyName = "Formatted Date Range"; Bounds.args = { - minDate: "7/10/2020", + minDate: "7/10/2020", maxDate: "20/10/2020", formatPattern: "dd/MM/yyyy", }; diff --git a/packages/playground/_stories/main/Calendar/CalendarDate/CalendarDate.stories.ts b/packages/playground/_stories/main/Calendar/CalendarDate/CalendarDate.stories.ts new file mode 100644 index 000000000000..7c738814526b --- /dev/null +++ b/packages/playground/_stories/main/Calendar/CalendarDate/CalendarDate.stories.ts @@ -0,0 +1,38 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta, StoryFn } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js"; + + +const component = "ui5-date"; + +export default { + title: "Main/Calendar/Calendar Date", + component: "CalendarDate", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + +`; + +var date = new Date(); + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + value: `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}` +} \ No newline at end of file diff --git a/packages/playground/_stories/main/Card/Card.stories.ts b/packages/playground/_stories/main/Card/Card.stories.ts index 96ed1569a9bf..d77574c9dfcd 100644 --- a/packages/playground/_stories/main/Card/Card.stories.ts +++ b/packages/playground/_stories/main/Card/Card.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryFn } from "@storybook/web-components"; import argTypes, { componentInfo } from "./argTypes.js"; import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; -import { DocsPage } from "../../../.storybook/docs"; +import { DocsPage } from "../../../.storybook/docs.js"; import type Card from "@ui5/webcomponents/dist/Card.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -13,7 +13,6 @@ const component = "ui5-card"; export default { title: "Main/Card", component: "Card", - subcomponents: { 'CardHeader': 'CardHeader' }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }), diff --git a/packages/playground/_stories/main/Card/CardHeader/CardHeader.stories.ts b/packages/playground/_stories/main/Card/CardHeader/CardHeader.stories.ts new file mode 100644 index 000000000000..438368154631 --- /dev/null +++ b/packages/playground/_stories/main/Card/CardHeader/CardHeader.stories.ts @@ -0,0 +1,55 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; +import { DocsPage } from "../../../../.storybook/docs.js"; +import type CardHeader from "@ui5/webcomponents/dist/CardHeader.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { ifDefined } from "lit/directives/if-defined.js"; + +const component = "ui5-card-header"; + +export default { + title: "Main/Card/Card Header", + component: "CardHeader", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => { + return html` + + + ${unsafeHTML(args.avatar)} + ${unsafeHTML(args.action)} + + + Richard Wilson + Elena Petrova + John Miller + + + `; +}; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"] +Basic.args = { + titleText: "Team Space", + subtitleText: "Direct Reports", + status: "3 of 10", + action: `View All`, + avatar: ``, + interactive: true, +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/ColorPalette/ColorPalette.stories.ts b/packages/playground/_stories/main/ColorPalette/ColorPalette.stories.ts index 0d6287bed73c..6d9af2fc2c2c 100644 --- a/packages/playground/_stories/main/ColorPalette/ColorPalette.stories.ts +++ b/packages/playground/_stories/main/ColorPalette/ColorPalette.stories.ts @@ -15,7 +15,6 @@ const component = "ui5-color-palette"; export default { title: "Main/ColorPalette", component: "ColorPalette", - subcomponents: {'ColorPaletteItem' : 'ColorPaletteItem'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/ColorPalette/ColorPaletteItem/ColorPaletteItem.stories.ts b/packages/playground/_stories/main/ColorPalette/ColorPaletteItem/ColorPaletteItem.stories.ts new file mode 100644 index 000000000000..7dcacda1efb6 --- /dev/null +++ b/packages/playground/_stories/main/ColorPalette/ColorPaletteItem/ColorPaletteItem.stories.ts @@ -0,0 +1,35 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; +import { ifDefined } from "lit/directives/if-defined.js"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type ColorPaletteItem from "@ui5/webcomponents/dist/ColorPaletteItem.js"; + +const component = "ui5-color-palette-item"; + +export default { + title: "Main/ColorPalette/ColorPaletteItem", + component: "ColorPaletteItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + +`; + +export const Basic = Template.bind({}); +Basic.storyName = "Color Palette with Items"; +Basic.tags = ["_hidden_"]; +Basic.args = { + value: "#ff6699" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts b/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts index 8c75b320c281..a035ea2741f2 100644 --- a/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts +++ b/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts @@ -19,10 +19,6 @@ const component = "ui5-combobox"; export default { title: "Main/Combo Box", component: "ComboBox", - subcomponents: { - ComboBoxItem: "ComboBoxItem", - ComboBoxGroupItem: "ComboBoxGroupItem", - }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }), diff --git a/packages/playground/_stories/main/ComboBox/ComboBoxGroupItem/ComboBoxGroupItem.stories.ts b/packages/playground/_stories/main/ComboBox/ComboBoxGroupItem/ComboBoxGroupItem.stories.ts new file mode 100644 index 000000000000..60f8c47da241 --- /dev/null +++ b/packages/playground/_stories/main/ComboBox/ComboBoxGroupItem/ComboBoxGroupItem.stories.ts @@ -0,0 +1,39 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +// @ts-ignore +import type ComboBoxGroupItem from "@ui5/webcomponents/dist/ComboBoxGroupItem.js"; + +const component = "ui5-cb-group-item"; + +export default { + title: "Main/Combo Box/Combo Box Group Item", + component: "ComboBoxGroupItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }), + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = ( + args +) => html` + + + +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "My group 1" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/ComboBox/ComboBoxItem/ComboBoxItem.stories.ts b/packages/playground/_stories/main/ComboBox/ComboBoxItem/ComboBoxItem.stories.ts new file mode 100644 index 000000000000..b5509a5bd8e2 --- /dev/null +++ b/packages/playground/_stories/main/ComboBox/ComboBoxItem/ComboBoxItem.stories.ts @@ -0,0 +1,41 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +// @ts-ignore +import type ComboBoxItem from "@ui5/webcomponents/dist/ComboBoxItem.js"; + +const component = "ui5-cb-item"; + +export default { + title: "Main/Combo Box/Combo Box Item", + component: "ComboBoxItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }), + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = ( + args +) => html` + + + +`; + + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Argentina", + additionalText: "AR" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Input/Input.stories.ts b/packages/playground/_stories/main/Input/Input.stories.ts index fb7a04532f68..01218838aa1f 100644 --- a/packages/playground/_stories/main/Input/Input.stories.ts +++ b/packages/playground/_stories/main/Input/Input.stories.ts @@ -19,10 +19,6 @@ let index = 0; export default { title: "Main/Input", component: "Input", - subcomponents: { - SuggestionItem: 'SuggestionItem', - SuggestionGroupItem : 'SuggestionGroupItem' - }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/Input/SuggestionGroupItem/SuggestionGroupItem.stories.ts b/packages/playground/_stories/main/Input/SuggestionGroupItem/SuggestionGroupItem.stories.ts new file mode 100644 index 000000000000..4d7cbaecbe56 --- /dev/null +++ b/packages/playground/_stories/main/Input/SuggestionGroupItem/SuggestionGroupItem.stories.ts @@ -0,0 +1,40 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type SuggestionGroupItem from "@ui5/webcomponents/dist/SuggestionGroupItem.js"; +import { ifDefined } from "lit-html/directives/if-defined.js"; + +const component = "ui5-suggestion-group-item"; + +export default { + title: "Main/Input/Suggestion Group Item", + component: "SuggestionGroupItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + + + +`; + + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Europe" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Input/SuggestionItem/SuggestionItem.stories.ts b/packages/playground/_stories/main/Input/SuggestionItem/SuggestionItem.stories.ts new file mode 100644 index 000000000000..d4c4dd867514 --- /dev/null +++ b/packages/playground/_stories/main/Input/SuggestionItem/SuggestionItem.stories.ts @@ -0,0 +1,45 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type SuggestionItem from "@ui5/webcomponents/dist/SuggestionItem.js"; +import { ifDefined } from "lit-html/directives/if-defined.js"; + +const component = "ui5-suggestion-item"; + +export default { + title: "Main/Input/Suggestion Item", + component: "SuggestionItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + +`; + + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Germany" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/List/CustomListItem/CustomListItem.stories.ts b/packages/playground/_stories/main/List/CustomListItem/CustomListItem.stories.ts new file mode 100644 index 000000000000..4799bf5524eb --- /dev/null +++ b/packages/playground/_stories/main/List/CustomListItem/CustomListItem.stories.ts @@ -0,0 +1,49 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta, StoryFn } from "@storybook/web-components"; + +import type CustomListItem from "@ui5/webcomponents/dist/CustomListItem.js"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +const component = "ui5-li-custom"; + +export default { + title: "Main/List/Custom List Item", + component: "CustomListItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => { + return html` + + ${unsafeHTML(args.default)} + ${unsafeHTML(args.deleteButton)} + + `; +}; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"] +Basic.args = { + default: `Click me + UI5 link + + Click me`, +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/List/GroupHeaderListItem/GroupHeaderListItem.stories.ts b/packages/playground/_stories/main/List/GroupHeaderListItem/GroupHeaderListItem.stories.ts new file mode 100644 index 000000000000..6fa442868744 --- /dev/null +++ b/packages/playground/_stories/main/List/GroupHeaderListItem/GroupHeaderListItem.stories.ts @@ -0,0 +1,60 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta, StoryFn } from "@storybook/web-components"; + +import type GroupHeaderListItem from "@ui5/webcomponents/dist/GroupHeaderListItem.js"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +const component = "ui5-li-groupheader"; + +export default { + title: "Main/List/Group Header List Item", + component: "GroupHeaderListItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => { + return html` + + ${unsafeHTML(args.default)} + + Jennifer +Lora +Carlotta + `; +}; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"] +Basic.args = { + default: `Front End Developers`, +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/List/List.stories.ts b/packages/playground/_stories/main/List/List.stories.ts index 5d3e356a9af0..afe288d05676 100644 --- a/packages/playground/_stories/main/List/List.stories.ts +++ b/packages/playground/_stories/main/List/List.stories.ts @@ -18,11 +18,6 @@ const component = "ui5-list"; export default { title: "Main/List", component: "List", - subcomponents: { - StandardListItem: "StandardListItem", - CustomListItem: "CustomListItem", - GroupHeaderListItem: "GroupHeaderListItem", - }, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/List/StandardListItem/StandardListItem.stories.ts b/packages/playground/_stories/main/List/StandardListItem/StandardListItem.stories.ts new file mode 100644 index 000000000000..5103c7393f3c --- /dev/null +++ b/packages/playground/_stories/main/List/StandardListItem/StandardListItem.stories.ts @@ -0,0 +1,57 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta } from "@storybook/web-components"; + +import type StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +const component = "ui5-li"; + +export default { + title: "Main/List/Standard List Item", + component: "StandardListItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => { + return html` + + ${unsafeHTML(args.default)} + ${unsafeHTML(args.imageContent)} + ${unsafeHTML(args.deleteButton)} + + `; +}; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"] +Basic.args = { + default: `Pineapple`, + icon: "nutrition-activity", + description: "Tropical plant with an edible fruit", + additionalText: "In-stock", + additionalTextState: "Success" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Menu/Menu.stories.ts b/packages/playground/_stories/main/Menu/Menu.stories.ts index ba8a4d5f4f00..614f98837186 100644 --- a/packages/playground/_stories/main/Menu/Menu.stories.ts +++ b/packages/playground/_stories/main/Menu/Menu.stories.ts @@ -16,7 +16,6 @@ const component = "ui5-menu"; export default { title: "Main/Menu", component: "Menu", - subcomponents: {'MenuItem' : 'MenuItem'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts b/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts new file mode 100644 index 000000000000..21e96f428340 --- /dev/null +++ b/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts @@ -0,0 +1,67 @@ +import { html } from "lit"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type MenuItem from "@ui5/webcomponents/dist/MenuItem.js"; + +const component = "ui5-menu-item"; + +export default { + title: "Main/Menu/MenuItem", + component: "MenuItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + ${unsafeHTML(args.default)} + +`; + +export const Basic = Template.bind({}); +Basic.storyName = "MenuItem"; +Basic.args = { + icon: "open-folder", + text: "Open", + startsSection: true, + default: ` + ` +}; +Basic.decorators = [ + (story) => html`Open Menu
+ ${story()} + `, +]; +Basic.tags = ["_hidden_"]; +Basic.parameters = { + docs: { + story: { + inline: false, + }, + } +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts b/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts index a3426ca767b4..00c1dc6f81b3 100644 --- a/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts +++ b/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts @@ -17,7 +17,6 @@ const component = "ui5-multi-combobox"; export default { title: "Main/Multi-Combo Box", component: "MultiComboBox", - subcomponents: {'MultiComboBoxItem' : 'MultiComboBoxItem', 'MultiComboBoxGroupItem' : 'MultiComboBoxGroupItem'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/MultiComboBox/MultiComboBoxGroupItem/MultiComboBoxGroupItem.stories.ts b/packages/playground/_stories/main/MultiComboBox/MultiComboBoxGroupItem/MultiComboBoxGroupItem.stories.ts new file mode 100644 index 000000000000..a12953f88379 --- /dev/null +++ b/packages/playground/_stories/main/MultiComboBox/MultiComboBoxGroupItem/MultiComboBoxGroupItem.stories.ts @@ -0,0 +1,39 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type MultiComboBoxGroupItem from "@ui5/webcomponents/dist/MultiComboBoxGroupItem.js"; + +const component = "ui5-mcb-group-item"; + +export default { + title: "Main/Multi-Combo Box/Multi-Combo Box Group Item", + component: "MultiComboBoxGroupItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + + + + + +`; + + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Europe" +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/MultiComboBox/MultiComboBoxItem/MultiComboBoxItem.stories.ts b/packages/playground/_stories/main/MultiComboBox/MultiComboBoxItem/MultiComboBoxItem.stories.ts new file mode 100644 index 000000000000..fc170930fe0d --- /dev/null +++ b/packages/playground/_stories/main/MultiComboBox/MultiComboBoxItem/MultiComboBoxItem.stories.ts @@ -0,0 +1,41 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type MultiComboBoxItem from "@ui5/webcomponents/dist/MultiComboBoxItem.js"; +import { ifDefined } from "lit-html/directives/if-defined.js"; + +const component = "ui5-mcb-item"; + +export default { + title: "Main/Multi-Combo Box/Multi-Combo Box Item", + component: "MultiComboBoxItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + +`; + + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Argentina", + selected: true +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts b/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts index 0dc4f5f4a51e..0d9888849a00 100644 --- a/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts +++ b/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts @@ -16,7 +16,6 @@ const component = "ui5-multi-input"; export default { title: "Main/Multi Input", component: "MultiInput", - subcomponents: {'Token' : 'Token'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/MultiInput/Token/Token.stories.ts b/packages/playground/_stories/main/MultiInput/Token/Token.stories.ts new file mode 100644 index 000000000000..067e9f7f859c --- /dev/null +++ b/packages/playground/_stories/main/MultiInput/Token/Token.stories.ts @@ -0,0 +1,44 @@ +import { html } from "lit"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs"; + +import type Token from "@ui5/webcomponents/dist/Token.js"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; + +const component = "ui5-token"; + +export default { + title: "Main/Multi Input/Token", + component: "Token", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + + ${unsafeHTML(args.closeIcon)} + +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + text: "Argentina" +}; + diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts index 2de027eb887d..4054444fbded 100644 --- a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts +++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts @@ -14,9 +14,8 @@ import type SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js"; const component = "ui5-segmented-button"; export default { - title: "Main/SegmentedButton", + title: "Main/Segmented Button", component: "SegmentedButton", - subcomponents: {'SegmentedButtonItem' : 'SegmentedButtonItem'}, parameters: { docs: { page: DocsPage({ ...componentInfo, component }) diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts new file mode 100644 index 000000000000..44c4ff62f0b3 --- /dev/null +++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts @@ -0,0 +1,51 @@ +import { html } from "lit"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { ifDefined } from "lit/directives/if-defined.js"; +import type { Meta } from "@storybook/web-components"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +import type SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"; + +const component = "ui5-segmented-button-item"; + +export default { + title: "Main/Segmented Button/Segmented Button Item", + component: "SegmentedButtonItem", + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, + argTypes, +} as Meta; + +const Template: UI5StoryArgs = (args) => html` + + Map + ${unsafeHTML(args.default)} + Terrain +`; + +export const Basic = Template.bind({}); +Basic.tags = ["_hidden_"]; +Basic.args = { + default: "Current item", + pressed: true, +}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Select/Option/Option.stories.ts b/packages/playground/_stories/main/Select/Option/Option.stories.ts new file mode 100644 index 000000000000..67ee62824c36 --- /dev/null +++ b/packages/playground/_stories/main/Select/Option/Option.stories.ts @@ -0,0 +1,45 @@ +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import type { Meta } from "@storybook/web-components"; + +import type Option from "@ui5/webcomponents/dist/Option.js"; + +import argTypes, { componentInfo } from "./argTypes.js"; +import type { StoryArgsSlots } from "./argTypes.js"; +import type { UI5StoryArgs } from "../../../../types.js"; + +import { DocsPage } from "../../../../.storybook/docs.js"; + +const component = "ui5-option"; + +export default { + title: "Main/Select/Option", + component: "Option", + argTypes, + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }) + }, + }, +} as Meta
From 65a73d71fcd44766431f8eb1e83ffbc8857681e5 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 19 Dec 2023 15:57:21 +0200 Subject: [PATCH 17/79] fix(ui5-menu): fix runtime js error on `getElementById` call (#8021) The PR adds a check to guarantee getElementById is called only if existing, e.g. the Menu is still part of the DOM tree and has not been removed in-between. The test pages changes are not related to the change, but we have noticed that the used CSS classes "samples-margin", "header" are missing and they are not doing anything. In addition, h tags have been replaced by ui5-title, so that the texts are readable in HC themes (otherwise you get dark texts on dark background). Fixes: #8017 --- packages/main/src/Menu.ts | 10 ++-- packages/main/test/pages/Menu.html | 67 ++++++++---------------- packages/main/test/pages/styles/Menu.css | 8 +++ 3 files changed, 36 insertions(+), 49 deletions(-) diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 373d4fd4f197..94de98c5ea77 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -384,10 +384,9 @@ class Menu extends UI5Element { if (!this.opener) { return; } - if (this.open) { - const rootNode = this.getRootNode() as Document; - const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && rootNode.getElementById(this.opener); + if (this.open) { + const opener = this.getOpener(); if (opener) { this.showAt(opener); } @@ -444,6 +443,11 @@ class Menu extends UI5Element { return this._popover; } + getOpener() { + const rootNode = this.getRootNode() as Document; + return this.opener instanceof HTMLElement ? this.opener : rootNode?.getElementById?.(this.opener); + } + _navigateBack() { const parentMenuItem = this._parentItemsStack.pop(); diff --git a/packages/main/test/pages/Menu.html b/packages/main/test/pages/Menu.html index 7f87585f3ab9..007e7cb66ac8 100644 --- a/packages/main/test/pages/Menu.html +++ b/packages/main/test/pages/Menu.html @@ -12,7 +12,7 @@ - + Open Menu
@@ -39,51 +39,26 @@ -
-

Clicked menu item text

-
- -
- -
- -
-

Text Direction

-
-
- -
- -
-

Prevent "before-open" event

-
-
- -
- -
-

Prevent "before-close" event

-
-
- -
- -
-

open/opener

-
-
- Add opener - Remove opener - Toggle open
- -
- -
-

Event logger

-
-
- -
+ Clicked menu item text + + + Text Direction + + + Prevent "before-open" event + + + Prevent "before-close" event + + + open/opener + Add opener + Remove opener + Toggle open
+ + + Event logger + diff --git a/packages/main/test/specs/Tree.spec.js b/packages/main/test/specs/Tree.spec.js index 235b5d20e476..71b3d58de99a 100644 --- a/packages/main/test/specs/Tree.spec.js +++ b/packages/main/test/specs/Tree.spec.js @@ -188,3 +188,27 @@ describe("Tree has screen reader support", () => { }); }); + + +describe("Tree slots", () => { + before(async () => { + await browser.url(`test/pages/Tree.html`); + }); + + it.only("items slot", async () => { + const treeItem = await browser.$("#treeItem"); + const btn = await browser.$("#btn"); + + let items = await treeItem.getProperty("items"); + assert.strictEqual(items.length, 1, "Correct items count"); + + await btn.click(); + + items = await treeItem.getProperty("items"); + const newlyAddedItem = await treeItem.$('#treeItem [ui5-tree-item]:last-child'); + + assert.strictEqual(items.length, 2, "Dynamic item is added correctly"); + assert.strictEqual(await newlyAddedItem.getProperty("text"), "1-1-2", "Dynamic item is added correctly"); + assert.strictEqual(await newlyAddedItem.getProperty("level"), 3, "Dynamic item is displayed correctly"); + }); +}); From 4237771ff20d1d5978a2db08ad6cbeade7b1e777 Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 4 Jan 2024 08:06:00 +0000 Subject: [PATCH 30/79] chore(release): publish v1.21.0-rc.5 [ci skip] --- CHANGELOG.md | 17 +++++++++++++++++ lerna.json | 2 +- packages/base/CHANGELOG.md | 8 ++++++++ packages/base/package.json | 4 ++-- packages/create-package/CHANGELOG.md | 8 ++++++++ packages/create-package/package.json | 2 +- packages/fiori/CHANGELOG.md | 8 ++++++++ packages/fiori/package.json | 12 ++++++------ packages/icons-business-suite/CHANGELOG.md | 8 ++++++++ packages/icons-business-suite/package.json | 6 +++--- packages/icons-tnt/CHANGELOG.md | 8 ++++++++ packages/icons-tnt/package.json | 6 +++--- packages/icons/CHANGELOG.md | 8 ++++++++ packages/icons/package.json | 6 +++--- packages/localization/CHANGELOG.md | 8 ++++++++ packages/localization/package.json | 6 +++--- packages/main/CHANGELOG.md | 17 +++++++++++++++++ packages/main/package.json | 16 ++++++++-------- packages/playground/CHANGELOG.md | 8 ++++++++ packages/playground/package.json | 2 +- packages/theming/CHANGELOG.md | 8 ++++++++ packages/theming/package.json | 6 +++--- packages/tools/CHANGELOG.md | 8 ++++++++ packages/tools/package.json | 2 +- 24 files changed, 149 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 082c598766ef..3a17c73836b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + + +### Bug Fixes + +* **ui5-combobox:** keep picker open on group selection ([#8039](https://github.com/SAP/ui5-webcomponents/issues/8039)) ([c72433e](https://github.com/SAP/ui5-webcomponents/commit/c72433e94b5e2302b5cba7028c80450e556be83f)) +* **ui5-tree:** correct item indentation ([#8051](https://github.com/SAP/ui5-webcomponents/issues/8051)) ([5e3662f](https://github.com/SAP/ui5-webcomponents/commit/5e3662ff57e3a932fa7b32b276b25f5552913f75)) + + +### Features + +* **ui5-checkbox:** add css shadow part to the label ([#8046](https://github.com/SAP/ui5-webcomponents/issues/8046)) ([0ea504e](https://github.com/SAP/ui5-webcomponents/commit/0ea504ed6bf2bcce8df4789829be859e1745b3e4)) + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) diff --git a/lerna.json b/lerna.json index 8f6ebd635d97..72cec5f15515 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 9b07fda3be24..8498cc2232a0 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-base diff --git a/packages/base/package.json b/packages/base/package.json index 09f7f3bac94c..f9652330c41a 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -40,7 +40,7 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.21.0-rc.4", + "@ui5/webcomponents-tools": "1.21.0-rc.5", "chromedriver": "119.0.1", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md index 82998ffbc1d6..3a2833c5df99 100644 --- a/packages/create-package/CHANGELOG.md +++ b/packages/create-package/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/create-webcomponents-package diff --git a/packages/create-package/package.json b/packages/create-package/package.json index 592ce09f05a2..e39026b5444e 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: create package", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md index 22c3efd50c42..bc7802b56981 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-fiori diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 4520a62f56ac..e784abc09819 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -45,14 +45,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.21.0-rc.4", - "@ui5/webcomponents-base": "1.21.0-rc.4", - "@ui5/webcomponents-icons": "1.21.0-rc.4", - "@ui5/webcomponents-theming": "1.21.0-rc.4", + "@ui5/webcomponents": "1.21.0-rc.5", + "@ui5/webcomponents-base": "1.21.0-rc.5", + "@ui5/webcomponents-icons": "1.21.0-rc.5", + "@ui5/webcomponents-theming": "1.21.0-rc.5", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4", + "@ui5/webcomponents-tools": "1.21.0-rc.5", "chromedriver": "119.0.1" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 18d005fd5b8c..816a6aae7293 100644 --- a/packages/icons-business-suite/CHANGELOG.md +++ b/packages/icons-business-suite/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json index 9ae05b451b17..022eec6e1ddb 100644 --- a/packages/icons-business-suite/package.json +++ b/packages/icons-business-suite/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-business-suite", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4" + "@ui5/webcomponents-tools": "1.21.0-rc.5" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 1525d4610b39..520e2f7012f4 100644 --- a/packages/icons-tnt/CHANGELOG.md +++ b/packages/icons-tnt/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-icons-tnt diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json index d62c2bd9874d..c8bd36f01629 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4" + "@ui5/webcomponents-tools": "1.21.0-rc.5" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 218c5c8bd863..e94a7e83112c 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 57f254aa5fce..100d6e712560 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4" + "@ui5/webcomponents-tools": "1.21.0-rc.5" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index dd231299e555..52c0329d3efb 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 62a1b39c91dc..8491ea58a3bb 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -30,13 +30,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.21.0-rc.4", + "@ui5/webcomponents-tools": "1.21.0-rc.5", "chromedriver": "119.0.1", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index fe64eb35adf5..fbea1ac5b0bd 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + + +### Bug Fixes + +* **ui5-combobox:** keep picker open on group selection ([#8039](https://github.com/SAP/ui5-webcomponents/issues/8039)) ([c72433e](https://github.com/SAP/ui5-webcomponents/commit/c72433e94b5e2302b5cba7028c80450e556be83f)) +* **ui5-tree:** correct item indentation ([#8051](https://github.com/SAP/ui5-webcomponents/issues/8051)) ([5e3662f](https://github.com/SAP/ui5-webcomponents/commit/5e3662ff57e3a932fa7b32b276b25f5552913f75)) + + +### Features + +* **ui5-checkbox:** add css shadow part to the label ([#8046](https://github.com/SAP/ui5-webcomponents/issues/8046)) ([0ea504e](https://github.com/SAP/ui5-webcomponents/commit/0ea504ed6bf2bcce8df4789829be859e1745b3e4)) + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) diff --git a/packages/main/package.json b/packages/main/package.json index dc9f1d081d59..b27475a00750 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -47,15 +47,15 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.4", - "@ui5/webcomponents-icons": "1.21.0-rc.4", - "@ui5/webcomponents-icons-business-suite": "1.21.0-rc.4", - "@ui5/webcomponents-icons-tnt": "1.21.0-rc.4", - "@ui5/webcomponents-localization": "1.21.0-rc.4", - "@ui5/webcomponents-theming": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5", + "@ui5/webcomponents-icons": "1.21.0-rc.5", + "@ui5/webcomponents-icons-business-suite": "1.21.0-rc.5", + "@ui5/webcomponents-icons-tnt": "1.21.0-rc.5", + "@ui5/webcomponents-localization": "1.21.0-rc.5", + "@ui5/webcomponents-theming": "1.21.0-rc.5" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4", + "@ui5/webcomponents-tools": "1.21.0-rc.5", "chromedriver": "119.0.1" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index eeb82485c9f3..1135aca351ab 100644 --- a/packages/playground/CHANGELOG.md +++ b/packages/playground/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index ae4358e4de10..5267b7c879fc 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components Playground", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md index cc8e97ba561d..c9d16ae62f9a 100644 --- a/packages/theming/CHANGELOG.md +++ b/packages/theming/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 18c715f6cd4d..0814412717be 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -31,10 +31,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.9.0", - "@ui5/webcomponents-base": "1.21.0-rc.4" + "@ui5/webcomponents-base": "1.21.0-rc.5" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.4", + "@ui5/webcomponents-tools": "1.21.0-rc.5", "globby": "^13.1.1", "json-beautify": "^1.1.1", "nps": "^5.10.0", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index 09683f590996..c74d6626d712 100644 --- a/packages/tools/CHANGELOG.md +++ b/packages/tools/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index cb676159fa1a..11cdabcf87e5 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.21.0-rc.4", + "version": "1.21.0-rc.5", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 8dc384e6381283fdcc1097b132c2f98d49ea6102 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 5 Jan 2024 16:17:20 +0200 Subject: [PATCH 31/79] fix(ui5-combobox): scroll to item upon keyboard navigation (#8044) FIXES: #3994 --- packages/main/src/ComboBox.ts | 17 ++++++ packages/main/src/ComboBoxPopover.hbs | 1 + packages/main/test/specs/ComboBox.spec.js | 68 +++++++++++++++++++++++ 3 files changed, 86 insertions(+) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index af73b32a929a..f5432b0d89ab 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -750,6 +750,7 @@ class ComboBox extends UI5Element { this._isValueStateFocused = false; this._announceSelectedItem(indexOfItem); + this._scrollToItem(indexOfItem, isForward); if (isGroupItem && isOpen) { return; @@ -1086,6 +1087,22 @@ class ComboBox extends UI5Element { } } + async _scrollToItem(indexOfItem: number, forward: boolean) { + const picker = await this._getPicker(); + const list = picker.querySelector(".ui5-combobox-items-list") as List; + const listItem = list?.items[indexOfItem]; + + if (listItem) { + const pickerRect = picker.getBoundingClientRect(); + const listItemRect = listItem.getBoundingClientRect(); + const isListItemInVisibleArea = listItemRect.top >= pickerRect.top && listItemRect.bottom <= pickerRect.bottom; + + if (!isListItemInVisibleArea) { + listItem.scrollIntoView({ behavior: "instant", block: forward ? "end" : "start", inline: "nearest" }); + } + } + } + _announceValueStateText() { const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" "); diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs index 3fe54026c64e..9bd1f8b1db26 100644 --- a/packages/main/src/ComboBoxPopover.hbs +++ b/packages/main/src/ComboBoxPopover.hbs @@ -66,6 +66,7 @@ {{/unless}} { assert.strictEqual(await input.getProperty("value"), "b", "Value is not autocompleted"); }); + + it ("Should scroll to items that are in the scroll area upon navigation", async () => { + await browser.url(`test/pages/ComboBox.html`); + await browser.setWindowSize(1000, 400); + + const combo = await browser.$("#combo-grouping"); + const input = await combo.shadow$("#ui5-combobox-input"); + const arrow = await combo.shadow$("[input-icon]"); + + await combo.scrollIntoView(); + + + await arrow.click(); + + let isInVisibleArea = await browser.executeAsync(async done => { + const combobox = document.getElementById("combo-grouping"); + const picker = await combobox._getPicker(); + const listItem = picker.querySelector(".ui5-combobox-items-list ui5-li:last-child"); + const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect(); + const elementRect = listItem.getBoundingClientRect(); + + // Check if the element is within the visible area + const isElementAboveViewport = elementRect.bottom < scrollableRect.top; + const isElementBelowViewport = elementRect.top > scrollableRect.bottom; + const isElementLeftOfViewport = elementRect.right < scrollableRect.left; + const isElementRightOfViewport = elementRect.left > scrollableRect.right; + + const isListItemInVisibleArea = ( + !isElementAboveViewport && + !isElementBelowViewport && + !isElementLeftOfViewport && + !isElementRightOfViewport + ); + + done(isListItemInVisibleArea); + }); + + assert.notOk(isInVisibleArea, "Item should not be displayed in the viewport"); + + // click ArrowDown 16 times + await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]); + await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]); + + isInVisibleArea = await browser.executeAsync(async done => { + const combobox = document.getElementById("combo-grouping"); + const picker = await combobox._getPicker(); + const listItem = picker.querySelector(".ui5-combobox-items-list ui5-li:last-child"); + const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect(); + const elementRect = listItem.getBoundingClientRect(); + + // Check if the element is within the visible area + const isElementAboveViewport = elementRect.bottom < scrollableRect.top; + const isElementBelowViewport = elementRect.top > scrollableRect.bottom; + const isElementLeftOfViewport = elementRect.right < scrollableRect.left; + const isElementRightOfViewport = elementRect.left > scrollableRect.right; + + const isListItemInVisibleArea = ( + !isElementAboveViewport && + !isElementBelowViewport && + !isElementLeftOfViewport && + !isElementRightOfViewport + ); + + done(isListItemInVisibleArea); + }); + + assert.ok(isInVisibleArea, "Item should be displayed in the viewport"); + }); }); From 72aa7775d3a874ab31fb3b633a59b1391e4d9663 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 5 Jan 2024 17:08:55 +0200 Subject: [PATCH 32/79] docs: correct docs before release (#8055) --- packages/main/src/ColorPalettePopover.ts | 2 +- packages/main/src/SplitButton.ts | 2 +- packages/main/src/ToolbarSelect.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index e9c3abb902cc..67ec74fc09e5 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -199,7 +199,7 @@ class ColorPalettePopover extends UI5Element { /** * Shows the ColorPalettePopover. - * Note: The method is deprecated and will be removed in future, use showAt instead. + * * @param {HTMLElement} opener the element that the popover is shown at * @public * @method diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index d7f6594b7748..44bea1d7dc77 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -141,7 +141,7 @@ class SplitButton extends UI5Element { * @name sap.ui.webc.main.SplitButton.prototype.activeArrowButton * @defaultvalue false * @public - * @since 1.20.0 + * @since 1.21.0 */ @property({ type: Boolean }) activeArrowButton!: boolean; diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 1951d6b87e32..b17304542f1c 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -34,7 +34,7 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail; * @abstract * @author SAP SE * @alias sap.ui.webc.main.ToolbarSelect - * @extends sap.ui.webc.base.UI5Element + * @extends sap.ui.webc.main.ToolbarItem * @tagname ui5-toolbar-select * @appenddocs sap.ui.webc.main.ToolbarSelectOption * @public From cddf8ba1cf0e587fe084872c8fc2f2b598ffebbc Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Fri, 5 Jan 2024 15:11:04 +0000 Subject: [PATCH 33/79] chore(release): publish v1.21.0 [ci skip] --- CHANGELOG.md | 11 +++++++++++ lerna.json | 2 +- packages/base/CHANGELOG.md | 8 ++++++++ packages/base/package.json | 4 ++-- packages/create-package/CHANGELOG.md | 8 ++++++++ packages/create-package/package.json | 2 +- packages/fiori/CHANGELOG.md | 8 ++++++++ packages/fiori/package.json | 12 ++++++------ packages/icons-business-suite/CHANGELOG.md | 8 ++++++++ packages/icons-business-suite/package.json | 6 +++--- packages/icons-tnt/CHANGELOG.md | 8 ++++++++ packages/icons-tnt/package.json | 6 +++--- packages/icons/CHANGELOG.md | 8 ++++++++ packages/icons/package.json | 6 +++--- packages/localization/CHANGELOG.md | 8 ++++++++ packages/localization/package.json | 6 +++--- packages/main/CHANGELOG.md | 11 +++++++++++ packages/main/package.json | 16 ++++++++-------- packages/playground/CHANGELOG.md | 8 ++++++++ packages/playground/package.json | 2 +- packages/theming/CHANGELOG.md | 8 ++++++++ packages/theming/package.json | 6 +++--- packages/tools/CHANGELOG.md | 8 ++++++++ packages/tools/package.json | 2 +- 24 files changed, 137 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a17c73836b8..d8c9fae490a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + + +### Bug Fixes + +* **ui5-combobox:** scroll to item upon keyboard navigation ([#8044](https://github.com/SAP/ui5-webcomponents/issues/8044)) ([8dc384e](https://github.com/SAP/ui5-webcomponents/commit/8dc384e6381283fdcc1097b132c2f98d49ea6102)), closes [#3994](https://github.com/SAP/ui5-webcomponents/issues/3994) + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) diff --git a/lerna.json b/lerna.json index 72cec5f15515..b50ad9131293 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.21.0-rc.5", + "version": "1.21.0", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 8498cc2232a0..2e9e20fc213b 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-base diff --git a/packages/base/package.json b/packages/base/package.json index f9652330c41a..218c5589cc62 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -40,7 +40,7 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.21.0-rc.5", + "@ui5/webcomponents-tools": "1.21.0", "chromedriver": "119.0.1", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md index 3a2833c5df99..da66d3876c31 100644 --- a/packages/create-package/CHANGELOG.md +++ b/packages/create-package/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/create-webcomponents-package diff --git a/packages/create-package/package.json b/packages/create-package/package.json index e39026b5444e..af56533b7b2f 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: create package", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md index bc7802b56981..6cca5d99bbd2 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-fiori diff --git a/packages/fiori/package.json b/packages/fiori/package.json index e784abc09819..c3ad0baa6ac5 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -45,14 +45,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.21.0-rc.5", - "@ui5/webcomponents-base": "1.21.0-rc.5", - "@ui5/webcomponents-icons": "1.21.0-rc.5", - "@ui5/webcomponents-theming": "1.21.0-rc.5", + "@ui5/webcomponents": "1.21.0", + "@ui5/webcomponents-base": "1.21.0", + "@ui5/webcomponents-icons": "1.21.0", + "@ui5/webcomponents-theming": "1.21.0", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5", + "@ui5/webcomponents-tools": "1.21.0", "chromedriver": "119.0.1" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 816a6aae7293..fc781463b08c 100644 --- a/packages/icons-business-suite/CHANGELOG.md +++ b/packages/icons-business-suite/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json index 022eec6e1ddb..c46bbd2440b0 100644 --- a/packages/icons-business-suite/package.json +++ b/packages/icons-business-suite/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-business-suite", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5" + "@ui5/webcomponents-tools": "1.21.0" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 520e2f7012f4..48d45e03d4a3 100644 --- a/packages/icons-tnt/CHANGELOG.md +++ b/packages/icons-tnt/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-icons-tnt diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json index c8bd36f01629..e29cd119bc41 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5" + "@ui5/webcomponents-tools": "1.21.0" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index e94a7e83112c..693a9d027754 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 100d6e712560..59911f4ffc6c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5" + "@ui5/webcomponents-tools": "1.21.0" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 52c0329d3efb..658a781961fe 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 8491ea58a3bb..30ab7dc51e9a 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -30,13 +30,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.21.0-rc.5", + "@ui5/webcomponents-tools": "1.21.0", "chromedriver": "119.0.1", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index fbea1ac5b0bd..906878a54ad4 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + + +### Bug Fixes + +* **ui5-combobox:** scroll to item upon keyboard navigation ([#8044](https://github.com/SAP/ui5-webcomponents/issues/8044)) ([8dc384e](https://github.com/SAP/ui5-webcomponents/commit/8dc384e6381283fdcc1097b132c2f98d49ea6102)), closes [#3994](https://github.com/SAP/ui5-webcomponents/issues/3994) + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) diff --git a/packages/main/package.json b/packages/main/package.json index b27475a00750..67becf0899c4 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -47,15 +47,15 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.21.0-rc.5", - "@ui5/webcomponents-icons": "1.21.0-rc.5", - "@ui5/webcomponents-icons-business-suite": "1.21.0-rc.5", - "@ui5/webcomponents-icons-tnt": "1.21.0-rc.5", - "@ui5/webcomponents-localization": "1.21.0-rc.5", - "@ui5/webcomponents-theming": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0", + "@ui5/webcomponents-icons": "1.21.0", + "@ui5/webcomponents-icons-business-suite": "1.21.0", + "@ui5/webcomponents-icons-tnt": "1.21.0", + "@ui5/webcomponents-localization": "1.21.0", + "@ui5/webcomponents-theming": "1.21.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5", + "@ui5/webcomponents-tools": "1.21.0", "chromedriver": "119.0.1" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index 1135aca351ab..fd17e4a1189d 100644 --- a/packages/playground/CHANGELOG.md +++ b/packages/playground/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index 5267b7c879fc..fdc44bc7fe13 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components Playground", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md index c9d16ae62f9a..7f1750463973 100644 --- a/packages/theming/CHANGELOG.md +++ b/packages/theming/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 0814412717be..bb0a488292d3 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -31,10 +31,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.9.0", - "@ui5/webcomponents-base": "1.21.0-rc.5" + "@ui5/webcomponents-base": "1.21.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.21.0-rc.5", + "@ui5/webcomponents-tools": "1.21.0", "globby": "^13.1.1", "json-beautify": "^1.1.1", "nps": "^5.10.0", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index c74d6626d712..00db6bb8c584 100644 --- a/packages/tools/CHANGELOG.md +++ b/packages/tools/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index 11cdabcf87e5..bde9fbf92bcb 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.21.0-rc.5", + "version": "1.21.0", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 6e9c57adf18a50bc2534e909e2fc3b66436eafdf Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Tue, 9 Jan 2024 09:53:07 +0200 Subject: [PATCH 34/79] docs: generate sitemap.xml and robots.txt (#8028) * docs: generate sitemap.xml and robots.txt * docs: verify ownership for google search console * Update Robots.txt --- .gitignore | 1 + packages/playground/.storybook/main.ts | 3 ++- .../sitemap-prepare.ts | 20 +++++++++++++++++++ packages/playground/docs/landing-page.html | 1 + packages/playground/package.json | 8 ++++++-- packages/playground/public/Robots.txt | 7 +++++++ yarn.lock | 5 +++++ 7 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 packages/playground/build-scripts-storybook/sitemap-prepare.ts create mode 100644 packages/playground/public/Robots.txt diff --git a/.gitignore b/.gitignore index 77d557e35d87..a71536e0d67a 100644 --- a/.gitignore +++ b/.gitignore @@ -87,6 +87,7 @@ packages/playground/.storybook/custom-elements.json packages/playground/docs/storybook/**/* packages/playground/docs/storybook-pages/**/* !packages/playground/docs/storybook-pages/.gitkeep +packages/playground/public/sitemap.xml packages/main/test/pages/fix.js packages/fiori/test/pages/fix.js diff --git a/packages/playground/.storybook/main.ts b/packages/playground/.storybook/main.ts index 122dcaff6969..b1773b5166bd 100644 --- a/packages/playground/.storybook/main.ts +++ b/packages/playground/.storybook/main.ts @@ -35,7 +35,8 @@ const config = { builder: "@storybook/builder-vite" }, features: { - storyStoreV7: true + storyStoreV7: true, + buildStoriesJson: true, }, typescript: { reactDocgen: 'react-docgen' diff --git a/packages/playground/build-scripts-storybook/sitemap-prepare.ts b/packages/playground/build-scripts-storybook/sitemap-prepare.ts new file mode 100644 index 000000000000..41725583cf6f --- /dev/null +++ b/packages/playground/build-scripts-storybook/sitemap-prepare.ts @@ -0,0 +1,20 @@ +import * as fs from 'fs'; +import * as xmlbuilder from 'xmlbuilder'; + +console.log('Generating sitemap.xml for playground...'); +const data = require('../dist/playground/stories.json'); + +let xml = xmlbuilder.create('urlset', { version: '1.0', encoding: 'UTF-8' }); +xml.att('xmlns', 'http://www.sitemaps.org/schemas/sitemap/0.9'); + +for (let key in data.stories) { + const kind = data.stories[key]?.kind?.split('/')[0]?.toLowerCase(); + xml.ele('url') + .ele('loc', {}, `https://sap.github.io/ui5-webcomponents/playground/?path=/${kind}/${key}`) + .up() + .ele('changefreq', {}, 'monthly'); +} + +let xmlString = xml.end({ pretty: true }); +fs.writeFileSync('./dist/playground/sitemap.xml', xmlString); +console.log('sitemap.xml generated successfully!'); \ No newline at end of file diff --git a/packages/playground/docs/landing-page.html b/packages/playground/docs/landing-page.html index 559f910c18fe..19801b081eb8 100644 --- a/packages/playground/docs/landing-page.html +++ b/packages/playground/docs/landing-page.html @@ -4,6 +4,7 @@ UI5 Web Components + diff --git a/packages/playground/package.json b/packages/playground/package.json index fdc44bc7fe13..67dfc07e085b 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -37,7 +37,7 @@ "vite-node": "^0.29.8" }, "scripts": { - "build": "npm run build-storybook", + "build": "npm run build-storybook && npm run build-sitemap", "build:bundle": "vite build", "clean": "npm-run-all --parallel clean:*", "clean:assets": "rimraf ./assets/js/ui5-webcomponents/*", @@ -55,6 +55,10 @@ "prepare:manifest": "node ./build-scripts-storybook/parse-manifest.js", "prepare:documentation": "vite-node ./build-scripts-storybook/documentation-prepare.ts", "storybook": "npm-run-all --parallel prepare:* && storybook dev -p 6006", - "build-storybook": "npm-run-all --parallel prepare:build:* prepare:* && tsc && storybook build -o ./dist/playground" + "build-storybook": "npm-run-all --parallel prepare:build:* prepare:* && tsc && storybook build -o ./dist/playground", + "build-sitemap": "vite-node ./build-scripts-storybook/sitemap-prepare.ts" + }, + "dependencies": { + "xmlbuilder": "^15.1.1" } } diff --git a/packages/playground/public/Robots.txt b/packages/playground/public/Robots.txt new file mode 100644 index 000000000000..202bfe92e182 --- /dev/null +++ b/packages/playground/public/Robots.txt @@ -0,0 +1,7 @@ +User-agent: Googlebot +Disallow: /nogooglebot/ + +User-agent: * +Allow: / + +Sitemap: https://sap.github.io/ui5-webcomponents/playground/sitemap.xml diff --git a/yarn.lock b/yarn.lock index 7bfe4d56ac3c..694702e02edd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14842,6 +14842,11 @@ xdg-basedir@^4.0.0: resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13" integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q== +xmlbuilder@^15.1.1: + version "15.1.1" + resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz#9dcdce49eea66d8d10b42cae94a79c3c8d0c2ec5" + integrity sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg== + xmlcreate@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-2.0.4.tgz#0c5ab0f99cdd02a81065fa9cd8f8ae87624889be" From ed642ca2120b1483f0f3ee53a9e9e3d94b07206b Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 9 Jan 2024 15:28:28 +0200 Subject: [PATCH 35/79] refactor: update "value" setter (#8067) There are use-cases when the "value" setter is called early on, before the component definition and that call simply does not occur and the state is lost. - make "value" setter "upgraded" (as it's done for the @property decorated properties), so that the setter is available - the setter no longer rely on the component framework-created accessors (this.options or option.disabled) because web components might not be defined yet. Instead, rely on the Light DOM - children and attributes. --- packages/main/src/Select.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 2c760c8158b0..defd6fd54eaa 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -467,6 +467,8 @@ class Select extends UI5Element implements IFormElement { this._onMenuChange = this.onMenuChange.bind(this); this._attachMenuListeners = this.attachMenuListeners.bind(this); this._detachMenuListeners = this.detachMenuListeners.bind(this); + + this._upgradeProperty("value"); } onBeforeRendering() { @@ -540,8 +542,11 @@ class Select extends UI5Element implements IFormElement { * @formEvents change liveChange */ set value(newValue: string) { - this.selectOptions.forEach(option => { - option.selected = !!((option.value || option.textContent) === newValue); + const menu = this._getSelectMenu(); + const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled")) as Array; + + selectOptions.forEach(option => { + option.selected = !!((option.getAttribute("value") || option.textContent) === newValue); }); } From 54f558d6b8415ba50365d8d8501c35406f67c825 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 15:56:27 +0200 Subject: [PATCH 36/79] build(deps): bump follow-redirects from 1.15.2 to 1.15.4 (#8062) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 694702e02edd..af757fa05a4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7459,9 +7459,9 @@ flow-parser@0.*: integrity sha512-45eNySEs7n692jLN+eHQ6zvC9e1cqu9Dq1PpDHTcWRri2HFEs8is8Anmp1RcIhYxA5TZYD6RuESG2jdj6nkDJQ== follow-redirects@^1.15.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" From 782350eb38ccc540b6b1567189b4a79b2cc0b3fb Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 15:56:39 +0200 Subject: [PATCH 37/79] build(deps): bump @babel/traverse from 7.22.8 to 7.23.6 (#8040) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.8 to 7.23.6. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.6/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index af757fa05a4f..a4ede1055046 100644 --- a/yarn.lock +++ b/yarn.lock @@ -96,7 +96,7 @@ json5 "^2.2.3" semver "^6.3.1" -"@babel/generator@^7.22.7", "@babel/generator@^7.22.9": +"@babel/generator@^7.22.9": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.9.tgz#572ecfa7a31002fa1de2a9d91621fd895da8493d" integrity sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw== @@ -1202,23 +1202,7 @@ "@babel/parser" "^7.22.5" "@babel/types" "^7.22.5" -"@babel/traverse@^7.22.6", "@babel/traverse@^7.22.8": - version "7.22.8" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.8.tgz#4d4451d31bc34efeae01eac222b514a77aa4000e" - integrity sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw== - dependencies: - "@babel/code-frame" "^7.22.5" - "@babel/generator" "^7.22.7" - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-function-name" "^7.22.5" - "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - "@babel/parser" "^7.22.7" - "@babel/types" "^7.22.5" - debug "^4.1.0" - globals "^11.1.0" - -"@babel/traverse@^7.23.2", "@babel/traverse@^7.23.6": +"@babel/traverse@^7.22.6", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.2", "@babel/traverse@^7.23.6": version "7.23.6" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.6.tgz#b53526a2367a0dd6edc423637f3d2d0f2521abc5" integrity sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ== From e5895f7d5076406769b516967137ba58f3567935 Mon Sep 17 00:00:00 2001 From: TeodorTaushanov Date: Tue, 9 Jan 2024 15:58:05 +0200 Subject: [PATCH 38/79] feat(ui5-badge): add different design types (#7564) * feat(ui5-badge): add different design types --- packages/main/src/Badge.hbs | 31 +- packages/main/src/Badge.ts | 167 +++++- .../main/src/i18n/messagebundle.properties | 20 +- packages/main/src/themes/Badge.css | 544 ++++++++++++++++-- .../main/src/themes/base/Badge-parameters.css | 109 +++- .../themes/sap_horizon/Badge-parameters.css | 8 +- .../sap_horizon_dark/Badge-parameters.css | 8 +- .../sap_horizon_hcb/Badge-parameters.css | 113 +++- .../sap_horizon_hcw/Badge-parameters.css | 110 +++- packages/main/src/types/BadgeDesign.ts | 69 +++ packages/main/test/pages/Badge.html | 128 ++++- packages/main/test/pages/Badge.js | 68 +++ packages/main/test/pages/styles/Badge.css | 12 +- packages/main/test/specs/Badge.spec.js | 40 ++ .../_stories/main/Badge/Badge.stories.ts | 122 +++- packages/theming/css-vars-usage.json | 150 +++++ 16 files changed, 1578 insertions(+), 121 deletions(-) create mode 100644 packages/main/src/types/BadgeDesign.ts create mode 100644 packages/main/test/pages/Badge.js diff --git a/packages/main/src/Badge.hbs b/packages/main/src/Badge.hbs index dfa26c9a76b1..9ee8eac0104a 100644 --- a/packages/main/src/Badge.hbs +++ b/packages/main/src/Badge.hbs @@ -1,9 +1,30 @@ -
- +{{#if interactive}} + +{{else}} +
+ {{> content}} +
+{{/if}} +{{#*inline "content"}} + + {{#if this._semanticIconName}} + + {{/if}} + {{badgeDescription}} {{#if hasText}} - + {{/if}} +{{/inline}} + + + - {{badgeDescription}} -
diff --git a/packages/main/src/Badge.ts b/packages/main/src/Badge.ts index 3e7374a0cf23..efc97decf861 100644 --- a/packages/main/src/Badge.ts +++ b/packages/main/src/Badge.ts @@ -1,16 +1,32 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; - +import Icon from "./Icon.js"; +import "@ui5/webcomponents-icons/dist/sys-help-2.js"; +import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; +import "@ui5/webcomponents-icons/dist/error.js"; +import "@ui5/webcomponents-icons/dist/alert.js"; +import "@ui5/webcomponents-icons/dist/information.js"; +import WrappingType from "./types/WrappingType.js"; +import BadgeDesign from "./types/BadgeDesign.js"; // Template import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js"; -import { BADGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; +import { + BADGE_DESCRIPTION_BADGE, + BADGE_DESCRIPTION_TAG, + BADGE_ROLE_DESCRIPTION, + BADGE_ERROR, + BADGE_WARNING, + BADGE_SUCCESS, + BADGE_INFORMATION, +} from "./generated/i18n/i18n-defaults.js"; // Styles import badgeCss from "./generated/themes/Badge.css.js"; @@ -19,14 +35,15 @@ import badgeCss from "./generated/themes/Badge.css.js"; * @class *

Overview

* - * The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. - * It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.). + * The ui5-badge is a component which serves + * the purpose to attract the user attention to some piece + * of information (state, quantity, condition, etc.). + * It can contain icon and text information, and its design can be chosen from specific design types. * *

Usage Guidelines

*
    - *
  • If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.
    • - *
  • When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.
    • - *
  • Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.
    • + *
  • If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the wrappingType property.
    • + *
  • Colors can be semantic or not semantic.
    • *
* *

ES6 Module Import

@@ -47,8 +64,31 @@ import badgeCss from "./generated/themes/Badge.css.js"; renderer: litRender, template: BadgeTemplate, styles: badgeCss, + dependencies: [ + Icon, + ], }) + +/** + * Fired when the user clicks on an interactive badge. + * Note: The event will be fired if the interactive property is true + * @event sap.ui.webc.main.Badge#click + * @public + * @since 1.20 + */ +@event("click") class Badge extends UI5Element { + /** + * Defines the design type of the component. + * @type {string} + * @name sap.ui.webc.main.Badge.prototype.design + * @defaultvalue "Set3" + * @public + * @since 1.20 + */ + @property({ defaultValue: BadgeDesign.Set3 }) + design!: `${BadgeDesign}`; + /** * Defines the color scheme of the component. * There are 10 predefined schemes. @@ -63,6 +103,44 @@ class Badge extends UI5Element { @property({ defaultValue: "1" }) colorScheme!: string; + /** + * Defines if the default state icon is shown. + * @type {boolean} + * @name sap.ui.webc.main.Badge.prototype.hideStateIcon + * @defaultValue false + * @public + * @since 1.20 + */ + @property({ type: Boolean }) + hideStateIcon!: boolean; + + /** + * Defines if the component is interactive (focusable and pressable). + *
Note: The badge cannot be interactive + * when design property is BadgeDesign.Set3 + * @type {boolean} + * @name sap.ui.webc.main.Badge.prototype.interactive + * @defaultValue false + * @public + * @since 1.20 + */ + @property({ type: Boolean }) + interactive!: boolean; + + /** + * Defines how the text of a component will be displayed when there is not enough space. + *
Note: For option "Normal" the text will wrap and the + * words will not be broken based on hyphenation. + * + * @name sap.ui.webc.main.Badge.prototype.wrappingType + * @type {sap.ui.webc.main.types.WrappingType} + * @defaultvalue "None" + * @public + * @since 1.20 + */ + @property({ type: WrappingType, defaultValue: WrappingType.None }) + wrappingType!: `${WrappingType}`; + /** * Defines if the badge has an icon. * @private @@ -77,6 +155,13 @@ class Badge extends UI5Element { @property({ type: Boolean }) _iconOnly!: boolean; + /** + * Defines if the badge has "Tag" design type. + * @private + */ + @property({ type: Boolean }) + _isTagDesign!: boolean; + /** * Defines the text of the component. *
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. @@ -107,8 +192,28 @@ class Badge extends UI5Element { } onBeforeRendering() { - this._hasIcon = this.hasIcon; + this._hasIcon = this.hasIcon || !!this._semanticIconName; this._iconOnly = this.iconOnly; + this._isTagDesign = this.design !== BadgeDesign.Set3; + } + + get _roleDescription() { + return Badge.i18nBundle.getText(BADGE_ROLE_DESCRIPTION); + } + + get _valueState() { + switch (this.design) { + case BadgeDesign.Positive: + return Badge.i18nBundle.getText(BADGE_SUCCESS); + case BadgeDesign.Negative: + return Badge.i18nBundle.getText(BADGE_ERROR); + case BadgeDesign.Critical: + return Badge.i18nBundle.getText(BADGE_WARNING); + case BadgeDesign.Information: + return Badge.i18nBundle.getText(BADGE_INFORMATION); + } + + return undefined; } get hasText() { @@ -123,8 +228,52 @@ class Badge extends UI5Element { return this.hasIcon && !this.hasText; } + get _title() { + return this.title || undefined; + } + get badgeDescription() { - return Badge.i18nBundle.getText(BADGE_DESCRIPTION); + if (this.interactive) { + return undefined; + } + + if (this.design === BadgeDesign.Set3) { + return Badge.i18nBundle.getText(BADGE_DESCRIPTION_BADGE); + } + + const valueState = this._valueState; + let description = Badge.i18nBundle.getText(BADGE_DESCRIPTION_TAG); + + if (valueState) { + description = `${description} ${valueState}`; + } + + return description; + } + + get _semanticIconName() { + if (this.hideStateIcon || this.hasIcon) { + return null; + } + + switch (this.design) { + case BadgeDesign.Neutral: + return "sys-help-2"; + case BadgeDesign.Positive: + return "sys-enter-2"; + case BadgeDesign.Negative: + return "error"; + case BadgeDesign.Critical: + return "alert"; + case BadgeDesign.Information: + return "information"; + default: + return null; + } + } + + _onclick() { + this.fireEvent("click"); } } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 08e68ddcee3e..80fa051ddd7f 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -32,7 +32,25 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Conjoined avatars. AVATAR_GROUP_MOVE=Press ARROW keys to move. #XACT: ARIA announcement for the badge -BADGE_DESCRIPTION=Badge +BADGE_DESCRIPTION_BADGE=Badge + +#XACT: ARIA announcement for the badge with "Tag" design +BADGE_DESCRIPTION_TAG=Tag + +#XACT: ARIA announcement for the roledescription attribute +BADGE_ROLE_DESCRIPTION=Tag button + +#XACT: ARIA announcement for the "Error" state +BADGE_ERROR=Error + +#XACT: ARIA announcement for the "Warning" state +BADGE_WARNING=Warning + +#XACT: ARIA announcement for the "Success" state +BADGE_SUCCESS=Success + +#XACT: ARIA announcement for the "Information" state +BADGE_INFORMATION=Information #XACT: position (current and max. value) of a Breadcrumb item which should be announced by screenreaders BREADCRUMB_ITEM_POS={0} of {1} diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css index 0f923580e9f1..1f20d0fcfd44 100644 --- a/packages/main/src/themes/Badge.css +++ b/packages/main/src/themes/Badge.css @@ -2,130 +2,596 @@ :host(:not([hidden])) { display: inline-block; - vertical-align: top; - height: var(--_ui5-badge-height); - min-width: 1.125em; - max-width: 100%; - padding-inline: var(--_ui5-badge-padding-inline); - border: var(--_ui5-badge-border); - border-color: var(--_ui5-badge-default-border-color); - background: var(--_ui5-badge-default-background); - color: var(--_ui5-badge-default-color); - border-radius: var(--_ui5-badge-border-radius); - box-sizing: border-box; +} + +:host { + font-size: var(--_ui5-badge-font-size); font-family: var(--_ui5-badge-font); font-weight: var(--_ui5-badge-font-weight); - font-size: var(--_ui5-badge-font-size); - text-align: center; letter-spacing: var(--_ui5-badge-letter-spacing); } +:host([_is-tag-design]) { + font-family: var(--sapFontBoldFamily); + font-size: var(--sapFontSmallSize); +} + .ui5-badge-root { display: flex; align-items: center; + justify-content: center; width: 100%; - height: 100%; + min-width: 1.125em; + max-width: 100%; + min-height: var(--_ui5-badge-height); + height: var(--_ui5-badge-height); box-sizing: border-box; - pointer-events: none; + padding: 0 var(--_ui5-badge-padding-inline); + border: var(--_ui5-badge-border); + border-radius: var(--_ui5-badge-border-radius); + white-space: nowrap; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + +:host([_is-tag-design]) .ui5-badge-root { + padding: 0 0.25rem; + border: 0.0625rem solid; + border-radius: var(--sapButton_BorderCornerRadius); +} + +:host([_is-tag-design][interactive]) .ui5-badge-root:active { + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive]) .ui5-badge-root { + cursor: pointer; +} + +:host([interactive]) .ui5-badge-root:focus { + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + outline-offset: 1px; +} + +:host([wrapping-type="Normal"]) .ui5-badge-root { + white-space: normal; + height: auto; +} + +:host([_icon-only]) .ui5-badge-root { + padding-inline: var(--_ui5-badge-padding-inline-icon-only); } .ui5-badge-text { - width: 100%; + text-transform: var(--_ui5-badge-text-transform); + text-align: start; + pointer-events: none; overflow: hidden; - white-space: nowrap; - font-weight: inherit; text-overflow: ellipsis; - text-transform: var(--_ui5-badge-text-transform); - letter-spacing: inherit; - font-size: inherit; } -:host([_icon-only]) { - padding-inline: var(--_ui5-badge-padding-inline-icon-only); +:host([_has-icon]) .ui5-badge-text { + padding-inline-start: var(--_ui5-badge-icon-gap); } +[ui5-icon], ::slotted([ui5-icon]) { - width: 0.75em; - height: 0.75em; - min-width: 0.75em; - min-height: 0.75em; + width: 0.75rem; + min-width: 0.75rem; + height: var(--_ui5-badge-height); + min-height: var(--_ui5-badge-height); color: inherit; + pointer-events: none; } -:host([_has-icon]) .ui5-badge-text { - padding-inline-start: var(--_ui5-badge-icon-gap); +:host([wrapping-type="Normal"]) [ui5-icon], +:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) { + align-self: flex-start; } +/* Set3 (BTP) Design Type */ + /* Scheme 1 */ -:host([color-scheme="1"]) { +.ui5-badge-root { background-color: var(--ui5-badge-color-scheme-1-background); border-color: var(--ui5-badge-color-scheme-1-border); color: var(--ui5-badge-color-scheme-1-color); } /* Scheme 2 */ -:host([color-scheme="2"]) { +:host([color-scheme="2"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-2-background); border-color: var(--ui5-badge-color-scheme-2-border); color: var(--ui5-badge-color-scheme-2-color); } /* Scheme 3 */ -:host([color-scheme="3"]) { +:host([color-scheme="3"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-3-background); border-color: var(--ui5-badge-color-scheme-3-border); color: var(--ui5-badge-color-scheme-3-color); } /* Scheme 4 */ -:host([color-scheme="4"]) { +:host([color-scheme="4"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-4-background); border-color: var(--ui5-badge-color-scheme-4-border); color: var(--ui5-badge-color-scheme-4-color); } /* Scheme 5 */ -:host([color-scheme="5"]) { +:host([color-scheme="5"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-5-background); border-color: var(--ui5-badge-color-scheme-5-border); color: var(--ui5-badge-color-scheme-5-color); } /* Scheme 6 */ -:host([color-scheme="6"]) { +:host([color-scheme="6"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-6-background); border-color: var(--ui5-badge-color-scheme-6-border); color: var(--ui5-badge-color-scheme-6-color); } /* Scheme 7 */ -:host([color-scheme="7"]) { +:host([color-scheme="7"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-7-background); border-color: var(--ui5-badge-color-scheme-7-border); color: var(--ui5-badge-color-scheme-7-color); } /* Scheme 8 */ -:host([color-scheme="8"]) { +:host([color-scheme="8"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-8-background); border-color: var(--ui5-badge-color-scheme-8-border); color: var(--ui5-badge-color-scheme-8-color); } /* Scheme 9 */ -:host([color-scheme="9"]) { +:host([color-scheme="9"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-9-background); border-color: var(--ui5-badge-color-scheme-9-border); color: var(--ui5-badge-color-scheme-9-color); } /* Scheme 10 */ -:host([color-scheme="10"]) { +:host([color-scheme="10"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-10-background); border-color: var(--ui5-badge-color-scheme-10-border); color: var(--ui5-badge-color-scheme-10-color); } +/* Value State Design Types */ +:host([design="Neutral"]) .ui5-badge-root { + background-color: var(--sapNeutralBackground); + border-color: var(--sapNeutralBorderColor); + color: var(--sapTextColor); + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive][design="Neutral"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Neutral_Hover_Background); + border-color: var(--sapButton_Neutral_Hover_BorderColor); + color: var(--sapButton_Neutral_Hover_TextColor); +} + +:host([interactive][design="Neutral"]) .ui5-badge-root:active { + background-color: var(--sapButton_Neutral_Active_Background); + border-color: var(--sapButton_Neutral_Active_BorderColor); + color: var(--sapButton_Active_TextColor); +} + +:host([design="Positive"]) .ui5-badge-root { + background-color: var(--sapButton_Success_Background); + border-color: var(--sapButton_Success_BorderColor); + color: var(--sapButton_Success_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Positive"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Success_Hover_Background); + border-color: var(--sapButton_Success_Hover_BorderColor); + color: var(--sapButton_Success_Hover_TextColor); +} + +:host([interactive][design="Positive"]) .ui5-badge-root:active { + background-color: var(--sapButton_Success_Active_Background); + border-color: var(--sapButton_Success_Active_BorderColor); + color: var(--sapButton_Accept_Selected_TextColor); +} + +:host([design="Negative"]) .ui5-badge-root { + background-color: var(--sapButton_Negative_Background); + border-color: var(--sapButton_Negative_BorderColor); + color: var(--sapButton_Negative_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Negative"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Negative_Hover_Background); + border-color: var(--sapButton_Negative_Hover_BorderColor); + color: var(--sapButton_Negative_Hover_TextColor); +} + +:host([interactive][design="Negative"]) .ui5-badge-root:active { + background-color: var(--sapButton_Negative_Active_Background); + border-color: var(--sapButton_Negative_Active_BorderColor); + color: var(--sapButton_Reject_Selected_TextColor); +} + +:host([design="Critical"]) .ui5-badge-root { + background-color: var(--sapButton_Critical_Background); + border-color: var(--sapButton_Critical_BorderColor); + color: var(--sapButton_Critical_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Critical"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Critical_Hover_Background); + border-color: var(--sapButton_Critical_Hover_BorderColor); + color: var(--sapButton_Critical_Hover_TextColor); +} + +:host([interactive][design="Critical"]) .ui5-badge-root:active { + background-color: var(--sapButton_Critical_Active_Background); + border-color: var(--sapButton_Critical_Active_BorderColor); + color: var(--sapButton_Attention_Selected_TextColor); +} + +:host([design="Information"]) .ui5-badge-root { + background-color: var(--sapButton_Information_Background); + border-color: var(--sapButton_Information_BorderColor); + color: var(--sapButton_Information_TextColor); + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive][design="Information"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Information_Hover_Background); + border-color: var(--sapButton_Information_Hover_BorderColor); + color: var(--sapButton_Information_Hover_TextColor); +} + +:host([interactive][design="Information"]) .ui5-badge-root:active { + background-color: var(--sapButton_Information_Active_Background); + border-color: var(--sapButton_Information_Active_BorderColor); + color: var(--sapButton_Selected_TextColor); +} + +/* Set1 Design Type */ + +:host([design="Set1"]) .ui5-badge-root { + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([design="Set1"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_1_Background); + border-color: var(--sapIndicationColor_1_BorderColor); + color: var(--sapIndicationColor_1_TextColor); +} + +:host([interactive][design="Set1"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_1_Hover_Background); +} + +:host([interactive][design="Set1"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_1_Active_Background); + border-color: var(--sapIndicationColor_1_Active_BorderColor); + color: var(--sapIndicationColor_1_Active_TextColor); +} + +:host([design="Set1"][color-scheme="2"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_2_Background); + border-color: var(--sapIndicationColor_2_BorderColor); + color: var(--sapIndicationColor_2_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_2_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_2_Active_Background); + border-color: var(--sapIndicationColor_2_Active_BorderColor); + color: var(--sapIndicationColor_2_Active_TextColor); +} + +:host([design="Set1"][color-scheme="3"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_3_Background); + border-color: var(--sapIndicationColor_3_BorderColor); + color: var(--sapIndicationColor_3_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="3"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_3_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="3"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_3_Active_Background); + border-color: var(--sapIndicationColor_3_Active_BorderColor); + color: var(--sapIndicationColor_3_Active_TextColor); +} + +:host([design="Set1"][color-scheme="4"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_4_Background); + border-color: var(--sapIndicationColor_4_BorderColor); + color: var(--sapIndicationColor_4_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="4"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_4_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="4"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_4_Active_Background); + border-color: var(--sapIndicationColor_4_Active_BorderColor); + color: var(--sapIndicationColor_4_Active_TextColor); +} + +:host([design="Set1"][color-scheme="5"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_5_Background); + border-color: var(--sapIndicationColor_5_BorderColor); + color: var(--sapIndicationColor_5_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="5"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_5_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="5"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_5_Active_Background); + border-color: var(--sapIndicationColor_5_Active_BorderColor); + color: var(--sapIndicationColor_5_Active_TextColor); +} + +:host([design="Set1"][color-scheme="6"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_6_Background); + border-color: var(--sapIndicationColor_6_BorderColor); + color: var(--sapIndicationColor_6_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="6"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_6_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="6"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_6_Active_Background); + border-color: var(--sapIndicationColor_6_Active_BorderColor); + color: var(--sapIndicationColor_6_Active_TextColor); +} + +:host([design="Set1"][color-scheme="7"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_7_Background); + border-color: var(--sapIndicationColor_7_BorderColor); + color: var(--sapIndicationColor_7_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="7"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_7_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="7"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_7_Active_Background); + border-color: var(--sapIndicationColor_7_Active_BorderColor); + color: var(--sapIndicationColor_7_Active_TextColor); +} + +:host([design="Set1"][color-scheme="8"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_8_Background); + border-color: var(--sapIndicationColor_8_BorderColor); + color: var(--sapIndicationColor_8_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="8"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_8_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="8"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_8_Active_Background); + border-color: var(--sapIndicationColor_8_Active_BorderColor); + color: var(--sapIndicationColor_8_Active_TextColor); +} + +:host([design="Set1"][color-scheme="9"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_9_Background); + border-color: var(--sapIndicationColor_9_BorderColor); + color: var(--sapIndicationColor_9_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="9"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_9_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="9"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_9_Active_Background); + border-color: var(--sapIndicationColor_9_Active_BorderColor); + color: var(--sapIndicationColor_9_Active_TextColor); +} + +:host([design="Set1"][color-scheme="10"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_10_Background); + border-color: var(--sapIndicationColor_10_BorderColor); + color: var(--sapIndicationColor_10_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="10"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_10_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="10"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_10_Active_Background); + border-color: var(--sapIndicationColor_10_Active_BorderColor); + color: var(--sapIndicationColor_10_Active_TextColor); +} + +/* Set2 Design Type */ + +:host([design="Set2"]) .ui5-badge-root { + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([design="Set2"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-1-background); + border-color: var(--ui5-badge-set2-color-scheme-1-border); + color: var(--ui5-badge-set2-color-scheme-1-color); +} + +:host([interactive][design="Set2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-1-hover-background); +} + +:host([interactive][design="Set2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-1-active-background); + border-color: var(--ui5-badge-set2-color-scheme-1-active-border); + color: var(--ui5-badge-set2-color-scheme-1-active-color); +} + +:host([design="Set2"][color-scheme="2"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-2-background); + border-color: var(--ui5-badge-set2-color-scheme-2-border); + color: var(--ui5-badge-set2-color-scheme-2-color); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-2-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-2-active-background); + border-color: var(--ui5-badge-set2-color-scheme-2-active-border); + color: var(--ui5-badge-set2-color-scheme-2-active-color); +} + +:host([design="Set2"][color-scheme="3"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-3-background); + border-color: var(--ui5-badge-set2-color-scheme-3-border); + color: var(--ui5-badge-set2-color-scheme-3-color); +} + +:host([interactive][design="Set2"][color-scheme="3"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-3-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="3"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-3-active-background); + border-color: var(--ui5-badge-set2-color-scheme-3-active-border); + color: var(--ui5-badge-set2-color-scheme-3-active-color); +} + +:host([design="Set2"][color-scheme="4"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-4-background); + border-color: var(--ui5-badge-set2-color-scheme-4-border); + color: var(--ui5-badge-set2-color-scheme-4-color); +} + +:host([interactive][design="Set2"][color-scheme="4"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-4-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="4"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-4-active-background); + border-color: var(--ui5-badge-set2-color-scheme-4-active-border); + color: var(--ui5-badge-set2-color-scheme-4-active-color); +} + +:host([design="Set2"][color-scheme="5"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-5-background); + border-color: var(--ui5-badge-set2-color-scheme-5-border); + color: var(--ui5-badge-set2-color-scheme-5-color); +} + +:host([interactive][design="Set2"][color-scheme="5"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-5-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="5"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-5-active-background); + border-color: var(--ui5-badge-set2-color-scheme-5-active-border); + color: var(--ui5-badge-set2-color-scheme-5-active-color); +} + +:host([design="Set2"][color-scheme="6"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-6-background); + border-color: var(--ui5-badge-set2-color-scheme-6-border); + color: var(--ui5-badge-set2-color-scheme-6-color); +} + +:host([interactive][design="Set2"][color-scheme="6"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-6-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="6"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-6-active-background); + border-color: var(--ui5-badge-set2-color-scheme-6-active-border); + color: var(--ui5-badge-set2-color-scheme-6-active-color); +} + +:host([design="Set2"][color-scheme="7"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-7-background); + border-color: var(--ui5-badge-set2-color-scheme-7-border); + color: var(--ui5-badge-set2-color-scheme-7-color); +} + +:host([interactive][design="Set2"][color-scheme="7"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-7-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="7"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-7-active-background); + border-color: var(--ui5-badge-set2-color-scheme-7-active-border); + color: var(--ui5-badge-set2-color-scheme-7-active-color); +} + +:host([design="Set2"][color-scheme="8"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-8-background); + border-color: var(--ui5-badge-set2-color-scheme-8-border); + color: var(--ui5-badge-set2-color-scheme-8-color); +} + +:host([interactive][design="Set2"][color-scheme="8"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-8-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="8"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-8-active-background); + border-color: var(--ui5-badge-set2-color-scheme-8-active-border); + color: var(--ui5-badge-set2-color-scheme-8-active-color); +} + +:host([design="Set2"][color-scheme="9"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-9-background); + border-color: var(--ui5-badge-set2-color-scheme-9-border); + color: var(--ui5-badge-set2-color-scheme-9-color); +} + +:host([interactive][design="Set2"][color-scheme="10"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-10-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="10"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-10-active-background); + border-color: var(--ui5-badge-set2-color-scheme-10-active-border); + color: var(--ui5-badge-set2-color-scheme-10-active-color); +} + +:host([design="Set2"][color-scheme="10"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-10-background); + border-color: var(--ui5-badge-set2-color-scheme-10-border); + color: var(--ui5-badge-set2-color-scheme-10-color); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-2-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-2-active-background); + border-color: var(--ui5-badge-set2-color-scheme-2-active-border); + color: var(--ui5-badge-set2-color-scheme-2-active-color); +} + /* ---Slotted Badges--- */ /* [ui5-avatar] - Badge icon styles */ /* Make icon take full width minus padding. diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css index ba669253b7aa..3ccfd5bca8b1 100644 --- a/packages/main/src/themes/base/Badge-parameters.css +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -5,15 +5,16 @@ --_ui5-badge-padding-inline: 0.3125em; --_ui5-badge-padding-inline-icon-only: 0.1875rem; --_ui5-badge-text-transform: uppercase; + --_ui5-badge-icon-height: 0.75em; --_ui5-badge-icon-gap: 0.125rem; --_ui5-badge-font-size: var(--sapFontSmallSize); --_ui5-badge-font: "72override", var(--sapFontFamily); --_ui5-badge-font-weight: bold; - --_ui5-badge-default-border-color: var(--ui5-badge-color-scheme-1-border); - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: 0.0125em; + --ui5-badge-text-shadow: var(--sapContent_TextShadow); + --ui5-badge-contrast-text-shadow: var(--sapContent_ContrastTextShadow); + --ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1); --ui5-badge-color-scheme-1-border: var(--sapAccentColor1); --ui5-badge-color-scheme-1-color: var(--sapTextColor); @@ -53,4 +54,106 @@ --ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9); --ui5-badge-color-scheme-10-border: var(--sapAccentColor9); --ui5-badge-color-scheme-10-color: var(--sapTextColor); + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1b); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1b_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1b_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2b); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2b_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3b); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3b_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4b); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4b_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5b); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5b_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6b); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6b_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7b); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7b_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8b); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8b_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9b); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9b_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10b); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10b_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Badge-parameters.css b/packages/main/src/themes/sap_horizon/Badge-parameters.css index 17d61f820921..de8d20cd8165 100644 --- a/packages/main/src/themes/sap_horizon/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon/Badge-parameters.css @@ -5,15 +5,13 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); diff --git a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css index 17d61f820921..de8d20cd8165 100644 --- a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css @@ -5,15 +5,13 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); diff --git a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css index e0482082825e..9cbe96dfc221 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css @@ -5,17 +5,18 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; + --ui5-badge-text-shadow: none; + --ui5-badge-contrast-text-shadow: none; + --ui5-badge-color-scheme-1-background: #362401; --ui5-badge-color-scheme-1-color: #FDA503; @@ -45,4 +46,106 @@ --ui5-badge-color-scheme-10-background: #1C2834; --ui5-badge-color-scheme-10-color: #A9BACB; + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css index 3177531bae69..2d5166fe8685 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css @@ -5,17 +5,21 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; + --ui5-badge-text-shadow: none; + --ui5-badge-contrast-text-shadow: none; + --ui5-badge-color-scheme-1-background: #FFC218; --ui5-badge-color-scheme-1-color: #5F2900; @@ -45,4 +49,106 @@ --ui5-badge-color-scheme-10-background: #C5CDD3; --ui5-badge-color-scheme-10-color: #2C3A48; + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/types/BadgeDesign.ts b/packages/main/src/types/BadgeDesign.ts new file mode 100644 index 000000000000..ab00706b0e20 --- /dev/null +++ b/packages/main/src/types/BadgeDesign.ts @@ -0,0 +1,69 @@ +/** + * Defines badge design types. + * + * @readonly + * @enum {string} + * @public + * @author SAP SE + * @alias sap.ui.webc.main.types.BadgeDesign + */ +enum BadgeDesign { + /** + * Set1 of generic indication colors that are intended for industry-specific use cases + * @public + * @type {Set1} + */ + Set1 = "Set1", + + /** + * Set2 of generic indication colors that are intended for industry-specific use cases + * @public + * @type {Set2} + */ + Set2 = "Set2", + + /** + * Set3 of generic indication colors that are + * intended for industry-specific use cases. Used in SAP BTP design system. + * @public + * @type {Set3} + */ + Set3 = "Set3", + + /** + * Neutral design + * @public + * @type {Neutral} + */ + Neutral = "Neutral", + + /** + * Information design + * @public + * @type {Information} + */ + Information = "Information", + + /** + * Positive design + * @public + * @type {Positive} + */ + Positive = "Positive", + + /** + * Negative design + * @public + * @type {Negative} + */ + Negative = "Negative", + + /** + * Critical design + * @public + * @type {Warning} + */ + Critical = "Critical", +} + +export default BadgeDesign; diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html index 8873e89e6ed9..a0e8cc61f4d5 100644 --- a/packages/main/test/pages/Badge.html +++ b/packages/main/test/pages/Badge.html @@ -15,33 +15,34 @@ + - + + Badges +
-

Badges

- This is an info label
- Required Required Required
- Hello world
- you are right
- Solution provided
- Available
- Required
- Required
- Required
- IN WAREHOUSE
-
- -
- - Default color + Custom Badges + + Default color truncate truncate truncate - - Done +
+ + bigger width - +
+ + Noninteractive + +
+ + Interactive + +
+ +
In Process @@ -54,13 +55,98 @@

Badges

Pending + same line +
+ + Pending + + + P wrapping-type="true" + + + wrapping-type="true" + + + Some long text with more lines text wrapping-type="true" + + + + +
+
+ Set 1 +
+
+
+
+ Set 2 +
+
+
+
+ Set 3 +
+
+
+
+ Value states +
+ + Neutral + + + Information + + + Positive + + + Negative + + + Critical + +
+
+ + Neutral - No icon + + + Information - No icon + + + Positive - No icon + + + Negative - No icon + + + Critical - No icon + +
+
+ + Neutral - Custom icon + + + Information - Custom icon + + + Positive - Custom icon + + + Negative - Custom icon + + + Critical - Custom icon + +
- diff --git a/packages/main/test/pages/Badge.js b/packages/main/test/pages/Badge.js new file mode 100644 index 000000000000..18e47bf61cac --- /dev/null +++ b/packages/main/test/pages/Badge.js @@ -0,0 +1,68 @@ +function initializeBadges() { + const colorSchemes = [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "10" + ]; + + const designTypes = [ + "Set1", + "Set2", + "Set3", + "None", + "Success", + "Warning", + "Error", + "Information" + ]; + + const clickEvent = (e) => { + console.error("clicked"); + }; + + document.querySelector("#checkboxId").addEventListener("change", e => { + document.querySelectorAll("ui5-badge").forEach((item) => { + item.interactive = e.currentTarget.checked; + + if (item.interactive) { + item.addEventListener("click", clickEvent); + } else { + item.removeEventListener("click", clickEvent); + } + }) + }); + + const set1Content = document.querySelector("#set1Content"); + colorSchemes.forEach((value) => { + set1Content.insertAdjacentHTML("beforeend", `Set 1 - Value - ${value}`); + set1Content.insertAdjacentHTML("beforeend", `Set 1 - Value - ${value}`); + + set1Content.insertAdjacentHTML("beforeend", "

"); + }); + + const set2Content = document.querySelector("#set2Content"); + colorSchemes.forEach((value) => { + set2Content.insertAdjacentHTML("beforeend", `Set 2 - Value - ${value}`); + set2Content.insertAdjacentHTML("beforeend", `Set 2 - Value - ${value}`); + + set2Content.insertAdjacentHTML("beforeend", "

"); + }); + + const set3Content = document.querySelector("#set3Content"); + colorSchemes.forEach((value) => { + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + + set3Content.insertAdjacentHTML("beforeend", "

"); + }); +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/Badge.css b/packages/main/test/pages/styles/Badge.css index b330c28a389b..d92af6fd99f5 100644 --- a/packages/main/test/pages/styles/Badge.css +++ b/packages/main/test/pages/styles/Badge.css @@ -6,10 +6,20 @@ body { .group { padding: 1rem; } -.gaps > * { + +.gaps .ui5-badge, +.gaps ui5-badge { margin-bottom: 0.5rem; + margin-right: 0.5rem; +} + +.width300px { + width: 300px; } +.width200px { + width: 200px; +} .badge1auto { background-color: var(--sapBackgroundColor); diff --git a/packages/main/test/specs/Badge.spec.js b/packages/main/test/specs/Badge.spec.js index 704edc9f9afa..2c77cdc65416 100644 --- a/packages/main/test/specs/Badge.spec.js +++ b/packages/main/test/specs/Badge.spec.js @@ -5,6 +5,46 @@ describe("Badge rendering", async () => { await browser.url(`test/pages/Badge.html`); }); + it("rendering", async () => { + let badgeRoot = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-badge-root"); + assert.strictEqual(await badgeRoot.getTagName(), "div", "badge root tag is 'div'."); + + badgeRoot = await browser.$("#interactiveBadge").shadow$(".ui5-badge-root"); + assert.strictEqual(await badgeRoot.getTagName(), "button", "badge root tag is 'button'."); + + let roleDescription = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_ROLE_DESCRIPTION)); + }); + + assert.strictEqual(await badgeRoot.getAttribute("aria-roledescription"), roleDescription, "aria-roledescription is set correctly"); + + let descriptionSuccess = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_SUCCESS)); + }); + + assert.strictEqual(await badgeRoot.getAttribute("aria-description"), descriptionSuccess, "aria-description is set correctly"); + + let badgeHiddenText = await browser.$("#noninteractiveBadge").shadow$(".ui5-hidden-text"); + + let descriptionTag = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_DESCRIPTION_TAG)); + }); + + assert.strictEqual(await badgeHiddenText.getText(), `${descriptionTag} ${descriptionSuccess}`, "hidden text is correct"); + + badgeHiddenText = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-hidden-text"); + + let descriptionBadge = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_DESCRIPTION_BADGE)); + }); + + assert.strictEqual(await badgeHiddenText.getText(), descriptionBadge, "hidden text is correct"); + }); + it("tests that label is rendered if there is text content", async () => { const badgeLabel = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-badge-text"); diff --git a/packages/playground/_stories/main/Badge/Badge.stories.ts b/packages/playground/_stories/main/Badge/Badge.stories.ts index ef3fc4cf6ee1..ce8da3890d8f 100644 --- a/packages/playground/_stories/main/Badge/Badge.stories.ts +++ b/packages/playground/_stories/main/Badge/Badge.stories.ts @@ -7,6 +7,8 @@ import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; import type Badge from "@ui5/webcomponents/dist/Badge.js"; +import BadgeDesign from "@ui5/webcomponents/dist/types/BadgeDesign.js"; +import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; const component = "ui5-badge"; @@ -24,7 +26,11 @@ export default { const Template: UI5StoryArgs = (args) => { return html` ${unsafeHTML(args.icon)} @@ -35,42 +41,108 @@ const Template: UI5StoryArgs = (args) => { export const Basic = Template.bind({}); Basic.args = { colorScheme: "6", - icon: ``, - default: "Pending" + default: "Badge Text" }; -export const Truncating = Template.bind({}); -Truncating.args = { - default: "This would truncate as it is too long", - style: "width: 200px", +export const Interactive = Template.bind({}); +Interactive.args = { + design: BadgeDesign.Positive, + interactive: true, + default: "Success" }; -const getIconHTML = (name: string): string => ``; -const AllColorSchemesBadges = [ - { icon: getIconHTML("accept"), default: "" }, - { icon: getIconHTML("sap-ui5"), default: "" }, - { icon: getIconHTML("add-equipment"), default: "In progress" }, - { icon: getIconHTML("lab"), default: "" }, - { icon: getIconHTML("email-read"), default: "" }, - { icon: "", default: "Pending" }, - { icon: getIconHTML("lightbulb"), default: "New idea" }, - { icon: getIconHTML("locked"), default: "Locked" }, - { icon: getIconHTML("flight"), default: "En route" }, - { icon: "", default: "Archived" }, +export const WrappingTypes = Template.bind({}); +WrappingTypes.decorators = [ + (story, {args}) => { + return html` +
+ ${story({ + args: { + ...args, + default: args.default || "This would truncate as it is too long", + wrappingType: args.wrappingType || WrappingType.None, + style: "width: 200px" + } + })} + ${story({ + args: { + ...args, + default: args.default || "This would wrap as it is too long", + wrappingType: args.wrappingType || WrappingType.Normal, + style: "width: 200px" + } + })} +
`; + }, +]; + +export const Designs = Template.bind({}); +Designs.decorators = [ + (story, ctx) => { + return html` +
+ ${[BadgeDesign.Neutral, BadgeDesign.Information, BadgeDesign.Positive, BadgeDesign.Negative, BadgeDesign.Critical, BadgeDesign.Set1, BadgeDesign.Set2, BadgeDesign.Set3].map((value) => { + return story({ + args: { + design: ctx.args.design || value, + default: ctx.args.default || value, + } + }); + })} +
`; + } +]; + +export const Set1 = Template.bind({}); +Set1.decorators = [ + (story, ctx) => { + return html` +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { + return story({ + args: { + design: ctx.args.design || BadgeDesign.Set1, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, + } + }); + })} +
`; + } +]; + +export const Set2 = Template.bind({}); +Set2.decorators = [ + (story, ctx) => { + return html` +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { + return story({ + args: { + design: ctx.args.design || BadgeDesign.Set2, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, + } + }); + })} +
`; + } ]; -export const AllColorSchemes = Template.bind({}); -AllColorSchemes.decorators = [ +export const Set3 = Template.bind({}); +Set3.decorators = [ (story, ctx) => { return html` - ${AllColorSchemesBadges.map((badge, i) => { +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { return story({ args: { - colorScheme: ctx.args.colorScheme || (i + 1).toString(), - icon: ctx.args.icon || badge.icon, - default: ctx.args.default || badge.default, + design: ctx.args.design || BadgeDesign.Set3, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, } }); - })}`; + })} +
`; } ]; \ No newline at end of file diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index e7c1f3b4f0a1..4d2043e68a38 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -78,6 +78,14 @@ "--sapButton_BorderColor", "--sapButton_BorderCornerRadius", "--sapButton_BorderWidth", + "--sapButton_Critical_Active_Background", + "--sapButton_Critical_Active_BorderColor", + "--sapButton_Critical_Background", + "--sapButton_Critical_BorderColor", + "--sapButton_Critical_Hover_Background", + "--sapButton_Critical_Hover_BorderColor", + "--sapButton_Critical_Hover_TextColor", + "--sapButton_Critical_TextColor", "--sapButton_Emphasized_Active_Background", "--sapButton_Emphasized_Active_BorderColor", "--sapButton_Emphasized_Active_TextColor", @@ -111,6 +119,14 @@ "--sapButton_Hover_Background", "--sapButton_Hover_BorderColor", "--sapButton_Hover_TextColor", + "--sapButton_Information_Active_Background", + "--sapButton_Information_Active_BorderColor", + "--sapButton_Information_Background", + "--sapButton_Information_BorderColor", + "--sapButton_Information_Hover_Background", + "--sapButton_Information_Hover_BorderColor", + "--sapButton_Information_Hover_TextColor", + "--sapButton_Information_TextColor", "--sapButton_Lite_Active_Background", "--sapButton_Lite_Active_BorderColor", "--sapButton_Lite_Background", @@ -119,7 +135,20 @@ "--sapButton_Lite_Hover_BorderColor", "--sapButton_Lite_Hover_TextColor", "--sapButton_Lite_TextColor", + "--sapButton_Negative_Active_Background", + "--sapButton_Negative_Active_BorderColor", + "--sapButton_Negative_Background", + "--sapButton_Negative_BorderColor", + "--sapButton_Negative_Hover_Background", + "--sapButton_Negative_Hover_BorderColor", + "--sapButton_Negative_Hover_TextColor", + "--sapButton_Negative_TextColor", + "--sapButton_Neutral_Active_Background", + "--sapButton_Neutral_Active_BorderColor", "--sapButton_Neutral_Background", + "--sapButton_Neutral_Hover_Background", + "--sapButton_Neutral_Hover_BorderColor", + "--sapButton_Neutral_Hover_TextColor", "--sapButton_Reject_Active_Background", "--sapButton_Reject_Active_BorderColor", "--sapButton_Reject_Active_TextColor", @@ -139,6 +168,14 @@ "--sapButton_Selected_Hover_Background", "--sapButton_Selected_Hover_BorderColor", "--sapButton_Selected_TextColor", + "--sapButton_Success_Active_Background", + "--sapButton_Success_Active_BorderColor", + "--sapButton_Success_Background", + "--sapButton_Success_BorderColor", + "--sapButton_Success_Hover_Background", + "--sapButton_Success_Hover_BorderColor", + "--sapButton_Success_Hover_TextColor", + "--sapButton_Success_TextColor", "--sapButton_TextColor", "--sapButton_TokenBackground", "--sapButton_TokenBorderColor", @@ -166,6 +203,7 @@ "--sapContent_ContrastIconColor", "--sapContent_ContrastShadowColor", "--sapContent_ContrastTextColor", + "--sapContent_ContrastTextShadow", "--sapContent_Critical_Shadow", "--sapContent_DisabledOpacity", "--sapContent_DisabledTextColor", @@ -298,6 +336,116 @@ "--sapIllus_PatternHighlight", "--sapIllus_PatternShadow", "--sapIllus_StrokeDetailColor", + "--sapIndicationColor_1", + "--sapIndicationColor_1_Active_Background", + "--sapIndicationColor_1_Active_BorderColor", + "--sapIndicationColor_1_Active_TextColor", + "--sapIndicationColor_1_Background", + "--sapIndicationColor_1_BorderColor", + "--sapIndicationColor_1_Hover_Background", + "--sapIndicationColor_1_TextColor", + "--sapIndicationColor_1b", + "--sapIndicationColor_1b_BorderColor", + "--sapIndicationColor_1b_Hover_Background", + "--sapIndicationColor_2", + "--sapIndicationColor_2_Active_Background", + "--sapIndicationColor_2_Active_BorderColor", + "--sapIndicationColor_2_Active_TextColor", + "--sapIndicationColor_2_Background", + "--sapIndicationColor_2_BorderColor", + "--sapIndicationColor_2_Hover_Background", + "--sapIndicationColor_2_TextColor", + "--sapIndicationColor_2b", + "--sapIndicationColor_2b_BorderColor", + "--sapIndicationColor_2b_Hover_Background", + "--sapIndicationColor_3", + "--sapIndicationColor_3_Active_Background", + "--sapIndicationColor_3_Active_BorderColor", + "--sapIndicationColor_3_Active_TextColor", + "--sapIndicationColor_3_Background", + "--sapIndicationColor_3_BorderColor", + "--sapIndicationColor_3_Hover_Background", + "--sapIndicationColor_3_TextColor", + "--sapIndicationColor_3b", + "--sapIndicationColor_3b_BorderColor", + "--sapIndicationColor_3b_Hover_Background", + "--sapIndicationColor_4", + "--sapIndicationColor_4_Active_Background", + "--sapIndicationColor_4_Active_BorderColor", + "--sapIndicationColor_4_Active_TextColor", + "--sapIndicationColor_4_Background", + "--sapIndicationColor_4_BorderColor", + "--sapIndicationColor_4_Hover_Background", + "--sapIndicationColor_4_TextColor", + "--sapIndicationColor_4b", + "--sapIndicationColor_4b_BorderColor", + "--sapIndicationColor_4b_Hover_Background", + "--sapIndicationColor_5", + "--sapIndicationColor_5_Active_Background", + "--sapIndicationColor_5_Active_BorderColor", + "--sapIndicationColor_5_Active_TextColor", + "--sapIndicationColor_5_Background", + "--sapIndicationColor_5_BorderColor", + "--sapIndicationColor_5_Hover_Background", + "--sapIndicationColor_5_TextColor", + "--sapIndicationColor_5b", + "--sapIndicationColor_5b_BorderColor", + "--sapIndicationColor_5b_Hover_Background", + "--sapIndicationColor_6", + "--sapIndicationColor_6_Active_Background", + "--sapIndicationColor_6_Active_BorderColor", + "--sapIndicationColor_6_Active_TextColor", + "--sapIndicationColor_6_Background", + "--sapIndicationColor_6_BorderColor", + "--sapIndicationColor_6_Hover_Background", + "--sapIndicationColor_6_TextColor", + "--sapIndicationColor_6b", + "--sapIndicationColor_6b_BorderColor", + "--sapIndicationColor_6b_Hover_Background", + "--sapIndicationColor_7", + "--sapIndicationColor_7_Active_Background", + "--sapIndicationColor_7_Active_BorderColor", + "--sapIndicationColor_7_Active_TextColor", + "--sapIndicationColor_7_Background", + "--sapIndicationColor_7_BorderColor", + "--sapIndicationColor_7_Hover_Background", + "--sapIndicationColor_7_TextColor", + "--sapIndicationColor_7b", + "--sapIndicationColor_7b_BorderColor", + "--sapIndicationColor_7b_Hover_Background", + "--sapIndicationColor_8", + "--sapIndicationColor_8_Active_Background", + "--sapIndicationColor_8_Active_BorderColor", + "--sapIndicationColor_8_Active_TextColor", + "--sapIndicationColor_8_Background", + "--sapIndicationColor_8_BorderColor", + "--sapIndicationColor_8_Hover_Background", + "--sapIndicationColor_8_TextColor", + "--sapIndicationColor_8b", + "--sapIndicationColor_8b_BorderColor", + "--sapIndicationColor_8b_Hover_Background", + "--sapIndicationColor_9", + "--sapIndicationColor_9_Active_Background", + "--sapIndicationColor_9_Active_BorderColor", + "--sapIndicationColor_9_Active_TextColor", + "--sapIndicationColor_9_Background", + "--sapIndicationColor_9_BorderColor", + "--sapIndicationColor_9_Hover_Background", + "--sapIndicationColor_9_TextColor", + "--sapIndicationColor_9b", + "--sapIndicationColor_9b_BorderColor", + "--sapIndicationColor_9b_Hover_Background", + "--sapIndicationColor_10", + "--sapIndicationColor_10_Active_Background", + "--sapIndicationColor_10_Active_BorderColor", + "--sapIndicationColor_10_Active_TextColor", + "--sapIndicationColor_10_Background", + "--sapIndicationColor_10_BorderColor", + "--sapIndicationColor_10_Hover_Background", + "--sapIndicationColor_10_TextColor", + "--sapIndicationColor_10b", + "--sapIndicationColor_10b_BorderColor", + "--sapIndicationColor_10b_Hover_Background", "--sapInformationBackground", "--sapInformationBorderColor", "--sapInformativeElementColor", @@ -351,6 +499,8 @@ "--sapNegativeColor", "--sapNegativeElementColor", "--sapNegativeTextColor", + "--sapNeutralBackground", + "--sapNeutralBorderColor", "--sapNeutralColor", "--sapNeutralElementColor", "--sapNeutralTextColor", From 0a35d6b3d00b582774735f7bb5422fbc8e6c8967 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 10 Jan 2024 12:30:09 +0200 Subject: [PATCH 39/79] docs: generate cem (#7613) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: generate cem * chore: cleanup * chore: migrate button * chore: generate manifest for base * chore: cleanup * chore: enhance * chore: align storybook to use cem * chore: 09/10 * chore: 10.10 * chore: add validator for manifest * chore: add valid jsdoc tags * chore: improve validators * chore: migrate samples prepare to storybook * chore: ts * chore: fix missing tags * chore: clean * chore: correct deps * chore: fix scripts * chore: validate tags * chore: optional execution of script * chore: sampels docs * chore: restore previous scripts and enable cem for base * chore: fix validation of @default * chore: fix storybook build * chore: fix schema and add missing tags * chore: restore bundle * chore: add param type * chore: generate new manifest * fix: chore description * fix: param / unnamed slots privacy * chore: show css parts * chore: extract storybook * chore: restore nps script * chore: restore component migration * fix: default value * fix: enum schema validation * fix: show interfaces * fix: ts files path * chore: refacotor, fix validation, add internal json * chore: update schema and validation * chore: add yarnlock * chore: fix event param types * fix: show event params * fix: display only public ones * chore: restore input paths * chore: refactor * chore: update schema * chore: restore paths * chore: add override for getters, methods, props * docs: new cem for Topic-P components - Icon (#7810) * docs: new cem for Topic-P components - Icon Issue: #7610 * docs: new cem for Topic-P components - Icon -fixed review comments * docs: new cem for Topic-P components - Icon -ignored lint error * fix(ui5-wizard): scrollbar styles are now present on root (#7838) * docs: new cem for Topic-P components - Icon -removed @interace jsdoc tag from interfaces file --------- Co-authored-by: Ivaylo Plashkov * docs: new cem for Topic-P components - ShellBar (#7823) * docs: new cem for Topic-P components - ShellBar Issue: #7610 * docs: new cem for Topic-P components - ShellBar - fixed review comments * fix(ui5-wizard): scrollbar styles are now present on root (#7838) * docs: new cem for Topic-P components - ShellBar - fixed review comments * chore: update chromedriver to 119 (#7883) * fix(ui5-switch): align 'off' text in RTL, add compact mode params (#7603) In RTL mode the 'off' icon of `Graphical` type Switch was misaligned due to missing parameters for RTL scenario of the control. Fixes: #7522 Fixes: #7806 * fix(framework): redundant fonts loading (#7868) fix(framework): font loading Co-authored-by: Nayden Naydenov * docs: new cem for Topic-P components - ShellBar - fixed review comments --------- Co-authored-by: Ivaylo Plashkov Co-authored-by: ilhan orhan Co-authored-by: Stoyan <88034608+hinzzx@users.noreply.github.com> Co-authored-by: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Co-authored-by: Nayden Naydenov * chore: add privacy for shellbar events * chore: ehnance validator * chore: add storybook * chore: migrate base package * chore: add correct export definition * docs(ui5-rating-indicator): improve documentation (#7915) * docs(ui5-textarea): improve documentation (#7913) * fix(ui5-textarea): improve documentation * docs(ui5-textarea): reflect comments * chore: fix some components values and make storybook to work * docs(ui5-slider, ui5-range-slider): enhance documentation (#7910) * fix(ui5-slider, ui5-range-slider): enhance documentation * docs(ui5-slider, ui5-range-slider): reflect review comments * chore: cleanup * docs: new cem for Topic-P components - Toolbar (#7814) * docs: new cem for Topic-P components - Toolbar Issue: #7610 * docs: new cem for Topic-P components - Toolbar -refactored toolbar related files docs * docs: new cem for Topic-P components - Toolbar - removed unnecessary tag rom ToolbarSeparator docs * docs: new cem for Topic-P components - Toolbar -fixed review comments * docs: new cem for Topic-P components - Toolbar - fixed review comments * docs: new cem for Topic-P components - Toolbar - fixed review comments * docs: new cem for Topic-P components - Toolbar - fixed review comments * docs: new cem for Topic-P components - Toolbar - fixed review comments * docs: new cem for Topic-P components - Toolbar - fixed review comments * docs: new cem for Topic-P components - List (#7824) * docs: new cem for Topic-P components - List Issue: #7610 * docs: new cem for Topic-P components - List - fixed review comments * docs: new cem for Topic-P components - List - fixed review comments * docs: new cem for Topic-P components - List - fixed review comments * docs: new cem for Topic-P components - List - fixed review comments * chore: fulfill list * docs(ui5-message-strip): improve documentation (#7917) * docs(ui5-message-strip): improve documentation * docs(ui5-message-strip): reflect review comments * docs(ui5-toast): improve documentation (#7914) * docs(ui5-toast): improve documentation * docs(ui5-toast): reflect review comments * docs: new cem for Topic-P components (#7851) * docs: new cem for Topic-P components (#7850) * docs: new cem for Topic-P components - ui5-select * docs: new cem for Topic-P components - ui5-select * docs: new cem for Topic-P components * docs: new cem for Topic-P components --------- Co-authored-by: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> * chore: fulfill * docs: new cem for Topic-P components - Tree (#7927) * fix(ui5-textarea): adjust scroll positioning (#7920) * docs(ui5-select-menu-option): correct disabled property description (#7925) docs(ui5-select-menu-option): correct docs Co-authored-by: Nayden Naydenov * docs: new cem for Topic-P components - Tree Issue: #7610 * docs: new cem for Topic-P components - Tree -fixed review comments --------- Co-authored-by: niyap <38278268+niyap@users.noreply.github.com> Co-authored-by: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Co-authored-by: Nayden Naydenov * chore: fullfill * docs(ui5-panel): improve documentation (#7924) * docs(ui5-panel): improve documentation * docs(ui5-panel): reflect review comments * docs(ui5-panel): reflect review comments * docs(ui5-page): improve documentation (#7919) * docs: rewrite JSDoc for custom-elements-manifest/analyzer (#7778) * docs: new cem for Topic-RD components JSDoc changes related to using the new custom-elements-manifest for Rodopi-owned components. Issue: #7610 * docs: remove types from enums * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * chore: fulfill * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 --------- Co-authored-by: Nayden Naydenov * chore: ts build * docs: Adapt JSDocs for new CЕM and Remove Redundancies (#7922) * docs: Adapt JSDocs for new CЕM and Remove Redundancies * docs: fix merge conflict * docs: adapt docs to updated specs * docs: fix storybook errors * docs: add missing file * docs: update interfaces * docs: fix comments * docs: fix more comments * docs: another comments fix * docs: fix more comments * docs: fix comments * docs: fix ITtimelineItem interface properties --------- Co-authored-by: Nayden Naydenov * docs(ui5-wizard): improve documentation (#7935) * docs(ui5-wizard): improve documentation * docs(ui5-wizard): reflect review comments * docs(ui5-combobox): improve documentation (#7942) * chore: execute package script * chore: extract type of parameters with default and enhace storybook * docs(ui5-multi-combobox): improve documentation (#7944) * chore: fix missed files * chore: fixes * chore: fix superclass references * chore: fix paths * chore: align exports with modules name * chore: fix datepicker * chore: add _ui5validator * docs(ui5-table): improve documentation (#7951) * docs(ui5-table): improve documentation * docs(ui5-table): reflect review comments --------- Co-authored-by: Nia Peeva * docs(ui5-input, ui5-multi-input): improve documentation (#7969) Co-authored-by: Nia Peeva * chore: fixes * chore: update schema * chore: handle non metadata props * chore: fix select * fix tree * fix tree items * fix tree * review comments * chore: aling interfaces * cleanup interfaces * chore: tab container * chor: tab container interface * chore: return type of color palette popover * chore: fix tree test * escaped new lines * remove parts * optimizations * chore: fix pathds * chore: make some components private * fix schema validation and cleanup * ehance customElement decorator * customElement decorator * fix globs pattern * makr correctly custom elements * corrections * chore: 2 interfaces added * chore: 2 more fixes * chore: fix label and token * chore: do not sort props --------- Co-authored-by: Nayden Naydenov Co-authored-by: Vladislav Tasev Co-authored-by: Plamen Ivanov Co-authored-by: Ivaylo Plashkov Co-authored-by: ilhan orhan Co-authored-by: Stoyan <88034608+hinzzx@users.noreply.github.com> Co-authored-by: niyap <38278268+niyap@users.noreply.github.com> Co-authored-by: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Co-authored-by: Siyana Todorova <72251110+s-todorova@users.noreply.github.com> Co-authored-by: Nikolay Hristov Co-authored-by: Nia Peeva --- docs/6-contributing/04-writing-samples.md | 2 +- packages/base/package-scripts.cjs | 9 +- packages/base/src/MediaRange.ts | 21 +- packages/base/src/StaticAreaItem.ts | 6 +- packages/base/src/UI5Element.ts | 83 +- packages/base/src/UI5ElementMetadata.ts | 44 +- packages/base/src/decorators/customElement.ts | 2 +- packages/base/src/delegate/ItemNavigation.ts | 4 +- packages/base/src/delegate/ResizeHandler.ts | 14 +- packages/base/src/i18nBundle.ts | 7 +- packages/base/src/types/AnimationMode.ts | 8 - packages/base/src/types/CSSColor.ts | 4 - packages/base/src/types/CSSSize.ts | 4 - packages/base/src/types/CalendarType.ts | 9 - packages/base/src/types/DOMReference.ts | 4 - packages/base/src/types/DataType.ts | 7 +- packages/base/src/types/Float.ts | 3 - packages/base/src/types/Integer.ts | 3 - .../base/src/types/InvisibleMessageMode.ts | 6 - .../base/src/types/ItemNavigationBehavior.ts | 6 - packages/base/src/types/NavigationMode.ts | 8 - packages/base/src/types/ValueState.ts | 14 - packages/fiori/src/Bar.ts | 33 +- packages/fiori/src/BarcodeScannerDialog.ts | 30 +- packages/fiori/src/DynamicSideContent.ts | 60 +- packages/fiori/src/FilterItem.ts | 17 +- packages/fiori/src/FilterItemOption.ts | 14 +- packages/fiori/src/FlexibleColumnLayout.ts | 88 +- packages/fiori/src/IllustratedMessage.ts | 44 +- packages/fiori/src/Interfaces.ts | 131 +- packages/fiori/src/MediaGallery.ts | 41 +- packages/fiori/src/MediaGalleryItem.ts | 29 +- packages/fiori/src/NotificationAction.ts | 28 +- .../fiori/src/NotificationListGroupItem.ts | 34 +- packages/fiori/src/NotificationListItem.ts | 30 +- .../fiori/src/NotificationListItemBase.ts | 44 +- packages/fiori/src/Page.ts | 42 +- packages/fiori/src/ProductSwitch.ts | 17 +- packages/fiori/src/ProductSwitchItem.ts | 32 +- packages/fiori/src/ShellBar.ts | 157 +- packages/fiori/src/ShellBarItem.ts | 25 +- packages/fiori/src/SideNavigation.ts | 25 +- packages/fiori/src/SideNavigationItem.ts | 21 +- packages/fiori/src/SideNavigationItemBase.ts | 50 +- packages/fiori/src/SideNavigationSubItem.ts | 6 +- packages/fiori/src/SortItem.ts | 14 +- packages/fiori/src/Timeline.ts | 22 +- packages/fiori/src/TimelineItem.ts | 47 +- packages/fiori/src/UploadCollection.ts | 57 +- packages/fiori/src/UploadCollectionItem.ts | 69 +- packages/fiori/src/ViewSettingsDialog.ts | 70 +- packages/fiori/src/Wizard.ts | 68 +- packages/fiori/src/WizardStep.ts | 40 +- packages/fiori/src/WizardTab.ts | 45 +- packages/fiori/src/types/BarDesign.ts | 8 - packages/fiori/src/types/FCLLayout.ts | 13 - .../src/types/IllustrationMessageSize.ts | 9 - .../src/types/IllustrationMessageType.ts | 107 -- .../fiori/src/types/MediaGalleryItemLayout.ts | 6 - .../fiori/src/types/MediaGalleryLayout.ts | 7 - .../types/MediaGalleryMenuHorizontalAlign.ts | 6 - .../types/MediaGalleryMenuVerticalAlign.ts | 6 - .../fiori/src/types/PageBackgroundDesign.ts | 7 - .../fiori/src/types/SideContentFallDown.ts | 8 - .../fiori/src/types/SideContentPosition.ts | 6 - .../fiori/src/types/SideContentVisibility.ts | 9 - packages/fiori/src/types/TimelineLayout.ts | 6 - .../src/types/UploadCollectionDnDMode.ts | 7 - packages/fiori/src/types/UploadState.ts | 8 - .../fiori/src/types/ViewSettingsDialogMode.ts | 6 - .../fiori/src/types/WizardContentLayout.ts | 6 - packages/main/src/Avatar.ts | 66 +- packages/main/src/AvatarGroup.ts | 53 +- packages/main/src/Badge.ts | 35 +- packages/main/src/Breadcrumbs.ts | 36 +- packages/main/src/BreadcrumbsItem.ts | 22 +- packages/main/src/BusyIndicator.ts | 31 +- packages/main/src/Button.ts | 67 +- packages/main/src/Calendar.ts | 55 +- packages/main/src/CalendarDate.ts | 9 +- packages/main/src/CalendarHeader.ts | 17 +- packages/main/src/CalendarPart.ts | 7 +- packages/main/src/Card.ts | 25 +- packages/main/src/CardHeader.ts | 55 +- packages/main/src/Carousel.ts | 81 +- packages/main/src/CheckBox.ts | 64 +- packages/main/src/ColorPalette.ts | 28 +- packages/main/src/ColorPaletteItem.ts | 22 +- packages/main/src/ColorPalettePopover.ts | 58 +- packages/main/src/ColorPicker.ts | 15 +- packages/main/src/ComboBox.ts | 82 +- packages/main/src/ComboBoxGroupItem.ts | 11 +- packages/main/src/ComboBoxItem.ts | 15 +- packages/main/src/CustomListItem.ts | 37 +- packages/main/src/DateComponentBase.ts | 27 +- packages/main/src/DatePicker.ts | 147 +- packages/main/src/DateRangePicker.ts | 33 +- packages/main/src/DateTimePicker.ts | 18 +- packages/main/src/DayPicker.ts | 79 +- packages/main/src/Dialog.ts | 53 +- packages/main/src/FileUploader.ts | 58 +- packages/main/src/GroupHeaderListItem.ts | 25 +- packages/main/src/Icon.ts | 46 +- packages/main/src/Input.ts | 141 +- packages/main/src/Interfaces.ts | 272 ++-- packages/main/src/Label.ts | 34 +- packages/main/src/Link.ts | 77 +- packages/main/src/List.ts | 92 +- packages/main/src/ListItem.ts | 43 +- packages/main/src/ListItemBase.ts | 12 +- packages/main/src/Menu.ts | 70 +- packages/main/src/MenuItem.ts | 43 +- packages/main/src/MessageStrip.ts | 39 +- packages/main/src/MonthPicker.ts | 23 +- packages/main/src/MultiComboBox.ts | 102 +- packages/main/src/MultiComboBoxGroupItem.ts | 10 +- packages/main/src/MultiComboBoxItem.ts | 12 +- packages/main/src/MultiInput.ts | 29 +- packages/main/src/Option.ts | 40 +- packages/main/src/Panel.ts | 70 +- packages/main/src/Popover.ts | 86 +- packages/main/src/Popup.ts | 76 +- packages/main/src/ProgressIndicator.ts | 32 +- packages/main/src/RadioButton.ts | 54 +- packages/main/src/RangeSlider.ts | 39 +- packages/main/src/RatingIndicator.ts | 39 +- packages/main/src/ResponsivePopover.ts | 43 +- packages/main/src/SegmentedButton.ts | 53 +- packages/main/src/SegmentedButtonItem.ts | 28 +- packages/main/src/Select.ts | 95 +- packages/main/src/SelectMenu.ts | 13 +- packages/main/src/SelectMenuOption.ts | 51 +- packages/main/src/Slider.ts | 23 +- packages/main/src/SliderBase.ts | 69 +- packages/main/src/SplitButton.ts | 75 +- packages/main/src/StandardListItem.ts | 82 +- packages/main/src/StepInput.ts | 72 +- packages/main/src/SuggestionGroupItem.ts | 14 +- packages/main/src/SuggestionItem.ts | 42 +- packages/main/src/SuggestionListItem.ts | 27 +- packages/main/src/Switch.ts | 65 +- packages/main/src/Tab.ts | 45 +- packages/main/src/TabContainer.ts | 115 +- packages/main/src/TabSeparator.ts | 13 +- packages/main/src/Table.ts | 97 +- packages/main/src/TableCell.ts | 19 +- packages/main/src/TableColumn.ts | 42 +- packages/main/src/TableGroupRow.ts | 35 +- packages/main/src/TableRow.ts | 47 +- packages/main/src/TextArea.ts | 87 +- packages/main/src/TimePicker.ts | 19 +- packages/main/src/TimePickerBase.ts | 98 +- packages/main/src/TimePickerClock.ts | 160 +- packages/main/src/TimePickerInternals.ts | 49 +- packages/main/src/TimeSelection.ts | 39 +- packages/main/src/TimeSelectionClocks.ts | 35 +- packages/main/src/TimeSelectionInputs.ts | 32 +- packages/main/src/Title.ts | 29 +- packages/main/src/Toast.ts | 41 +- packages/main/src/ToggleButton.ts | 9 +- packages/main/src/ToggleSpinButton.ts | 20 +- packages/main/src/Token.ts | 42 +- packages/main/src/Tokenizer.ts | 18 +- packages/main/src/Toolbar.ts | 37 +- packages/main/src/ToolbarButton.ts | 46 +- packages/main/src/ToolbarItem.ts | 37 +- packages/main/src/ToolbarRegistry.ts | 12 +- packages/main/src/ToolbarSelect.ts | 42 +- packages/main/src/ToolbarSelectOption.ts | 13 +- packages/main/src/ToolbarSeparator.ts | 6 +- packages/main/src/ToolbarSpacer.ts | 11 +- packages/main/src/Tree.ts | 80 +- packages/main/src/TreeItem.ts | 33 +- packages/main/src/TreeItemBase.ts | 59 +- packages/main/src/TreeItemCustom.ts | 28 +- packages/main/src/WheelSlider.ts | 42 +- packages/main/src/YearPicker.ts | 28 +- .../main/src/features/InputSuggestions.ts | 22 +- packages/main/src/types/AvatarColorScheme.ts | 15 - packages/main/src/types/AvatarGroupType.ts | 6 - packages/main/src/types/AvatarShape.ts | 6 - packages/main/src/types/AvatarSize.ts | 9 - packages/main/src/types/BackgroundDesign.ts | 7 - packages/main/src/types/BadgeDesign.ts | 12 - packages/main/src/types/BorderDesign.ts | 6 - packages/main/src/types/BreadcrumbsDesign.ts | 6 - .../src/types/BreadcrumbsSeparatorStyle.ts | 10 - packages/main/src/types/BusyIndicatorSize.ts | 7 - packages/main/src/types/ButtonDesign.ts | 10 - packages/main/src/types/ButtonType.ts | 7 - .../main/src/types/CalendarPickersMode.ts | 16 +- .../main/src/types/CalendarSelectionMode.ts | 7 - .../main/src/types/CarouselArrowsPlacement.ts | 6 - .../src/types/CarouselPageIndicatorStyle.ts | 6 - packages/main/src/types/ComboBoxFilter.ts | 8 - packages/main/src/types/HasPopup.ts | 9 - packages/main/src/types/IconDesign.ts | 12 - packages/main/src/types/InputType.ts | 10 - packages/main/src/types/LinkDesign.ts | 7 - packages/main/src/types/ListGrowingMode.ts | 7 - packages/main/src/types/ListItemType.ts | 8 - packages/main/src/types/ListMode.ts | 11 - packages/main/src/types/ListSeparators.ts | 7 - packages/main/src/types/MessageStripDesign.ts | 8 - .../main/src/types/PanelAccessibleRole.ts | 7 - .../main/src/types/PopoverHorizontalAlign.ts | 8 - .../main/src/types/PopoverPlacementType.ts | 8 - .../main/src/types/PopoverVerticalAlign.ts | 8 - .../main/src/types/PopupAccessibleRole.ts | 7 - packages/main/src/types/Priority.ts | 8 - .../main/src/types/SegmentedButtonMode.ts | 6 - packages/main/src/types/SemanticColor.ts | 9 - packages/main/src/types/SwitchDesign.ts | 6 - .../src/types/TabContainerBackgroundDesign.ts | 7 - .../src/types/TabContainerTabsPlacement.ts | 6 - packages/main/src/types/TabLayout.ts | 6 - .../main/src/types/TableColumnPopinDisplay.ts | 6 - packages/main/src/types/TableGrowingMode.ts | 7 - packages/main/src/types/TableMode.ts | 7 - packages/main/src/types/TableRowType.ts | 6 - packages/main/src/types/TabsOverflowMode.ts | 6 - packages/main/src/types/TitleLevel.ts | 10 - packages/main/src/types/ToastPlacement.ts | 13 - packages/main/src/types/ToolbarAlign.ts | 11 +- .../src/types/ToolbarItemOverflowBehavior.ts | 10 +- packages/main/src/types/WrappingType.ts | 6 - .../.storybook/args/enhanceArgTypes.ts | 8 + .../event/EventDescriptionRenderer.tsx | 6 +- .../method/MethodDescriptionRenderer.tsx | 11 +- packages/playground/.storybook/args/types.ts | 12 +- .../build-scripts-storybook/parse-manifest.js | 82 +- .../samples-prepare.js | 166 -- .../samples-prepare.ts | 258 ++++ packages/playground/package.json | 2 +- packages/tools/components-package/eslint.js | 1 + packages/tools/components-package/nps.js | 4 +- .../cem/custom-elements-manifest.config.mjs | 463 ++++++ packages/tools/lib/cem/event.mjs | 114 ++ packages/tools/lib/cem/schema-internal.json | 1354 +++++++++++++++++ packages/tools/lib/cem/schema.json | 1098 +++++++++++++ packages/tools/lib/cem/types-internal.d.ts | 1032 +++++++++++++ packages/tools/lib/cem/types.d.ts | 871 +++++++++++ packages/tools/lib/cem/utils.mjs | 355 +++++ packages/tools/lib/cem/validate.js | 63 + packages/tools/package.json | 3 + yarn.lock | 102 +- 246 files changed, 7945 insertions(+), 5525 deletions(-) delete mode 100644 packages/playground/build-scripts-storybook/samples-prepare.js create mode 100644 packages/playground/build-scripts-storybook/samples-prepare.ts create mode 100644 packages/tools/lib/cem/custom-elements-manifest.config.mjs create mode 100644 packages/tools/lib/cem/event.mjs create mode 100644 packages/tools/lib/cem/schema-internal.json create mode 100644 packages/tools/lib/cem/schema.json create mode 100644 packages/tools/lib/cem/types-internal.d.ts create mode 100644 packages/tools/lib/cem/types.d.ts create mode 100644 packages/tools/lib/cem/utils.mjs create mode 100644 packages/tools/lib/cem/validate.js diff --git a/docs/6-contributing/04-writing-samples.md b/docs/6-contributing/04-writing-samples.md index b5db4e5ae4fd..8d70fe4e514c 100644 --- a/docs/6-contributing/04-writing-samples.md +++ b/docs/6-contributing/04-writing-samples.md @@ -110,7 +110,7 @@ The above example includes only the `indeterminate`, `checked` properties in the ## Documentation -The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.js` script. +The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.ts` script. ### Docs page Every story has a `docs` page in the storybook's sidebar. Usually, this page is generated automatically by storybook but it can be customized by adding a `docs` property to the story parameters. diff --git a/packages/base/package-scripts.cjs b/packages/base/package-scripts.cjs index c6ce352bc6c0..6d38c097318b 100644 --- a/packages/base/package-scripts.cjs +++ b/packages/base/package-scripts.cjs @@ -6,7 +6,6 @@ const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/i const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js"); const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js"); const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js"); -const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js"); const LIB = path.join(__dirname, `../tools/lib/`); @@ -43,11 +42,9 @@ const scripts = { generateStyles: `node "${stylesScript}"`, generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`, generateAPI: { - default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup", - prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`, - preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`, - jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`, - cleanup: "rimraf jsdoc-dist/" + default: "nps generateAPI.generateCEM generateAPI.validateCEM", + generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs"`, + validateCEM: `node "${LIB}/cem/validate.js"`, }, watch: { default: 'concurrently "nps watch.src" "nps watch.styles"', diff --git a/packages/base/src/MediaRange.ts b/packages/base/src/MediaRange.ts index 54acbd474e12..d81f2aa58eb8 100644 --- a/packages/base/src/MediaRange.ts +++ b/packages/base/src/MediaRange.ts @@ -11,8 +11,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); /** * Enumeration containing the names and settings of predefined screen width media query range sets. * - * @namespace - * @name MediaRange.RANGESETS * @public */ enum RANGESETS { @@ -27,7 +25,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); *
  • "XL": For screens greater than or equal to 1440 pixels.
    • * * - * @name MediaRange.RANGESETS.RANGE_4STEPS * @public */ RANGE_4STEPS = "4Step", @@ -49,10 +46,9 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); *
  • "Large": For screens greater than or equal to 400 pixels.
    • * * - * @param {string} name The name of the range set to be initialized. + * @param name The name of the range set to be initialized. * The name must be a valid id and consist only of letters and numeric digits. - * @param {Range} [range] The given range set. - * @name MediaRange.initRangeSet + * @param range The given range set. */ const initRangeSet = (name: string, range: Range) => { mediaRanges.set(name, range); @@ -64,13 +60,10 @@ const initRangeSet = (name: string, range: Range) => { * If the optional parameter width is given, the active range will be determined for that width, * otherwise it is determined for the current window size. * - * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet}) - * @param {number} [width] An optional width, based on which the range should be determined; + * @param name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet}) + * @param [width] An optional width, based on which the range should be determined; * If width is not provided, the window size will be used. - * @returns {string} The name of the current active interval of the range set. - * - * @name MediaRange.getCurrentRange - * @function + * @returns The name of the current active interval of the range set. * @public */ const getCurrentRange = (name: string, width = window.innerWidth): string => { @@ -94,11 +87,7 @@ const getCurrentRange = (name: string, width = window.innerWidth): string => { /** * API for screen width changes. - * - * @namespace - * @name MediaRange */ - const MediaRange = { RANGESETS, initRangeSet, diff --git a/packages/base/src/StaticAreaItem.ts b/packages/base/src/StaticAreaItem.ts index 074b45006c46..203812ac4721 100644 --- a/packages/base/src/StaticAreaItem.ts +++ b/packages/base/src/StaticAreaItem.ts @@ -10,9 +10,7 @@ const pureTagName = "ui5-static-area-item"; const popupIntegrationAttr = "data-sap-ui-integration-popup-content"; /** - * * @class - * @author SAP SE * @private */ class StaticAreaItem extends HTMLElement { @@ -26,7 +24,7 @@ class StaticAreaItem extends HTMLElement { } /** - * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item + * @param ownerElement the UI5Element instance that owns this static area item */ setOwnerElement(ownerElement: UI5Element) { this.ownerElement = ownerElement; @@ -83,8 +81,8 @@ class StaticAreaItem extends HTMLElement { } /** - * @protected * Returns reference to the DOM element where the current fragment is added. + * @protected */ async getDomRef() { this.updateAdditionalProperties(); diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 0d31c6b04a04..240ca03f728e 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -80,12 +80,9 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) { } /** + * @class * Base class for all UI5 Web Components * - * @class - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.UI5Element * @extends HTMLElement * @public */ @@ -230,25 +227,25 @@ abstract class UI5Element extends HTMLElement { * Called every time before the component renders. * @public */ - onBeforeRendering() {} + onBeforeRendering(): void {} /** * Called every time after the component renders. * @public */ - onAfterRendering() {} + onAfterRendering(): void {} /** * Called on connectedCallback - added to the DOM. * @public */ - onEnterDOM() {} + onEnterDOM(): void {} /** * Called on disconnectedCallback - removed from the DOM. * @public */ - onExitDOM() {} + onExitDOM(): void {} /** * @private @@ -441,28 +438,28 @@ abstract class UI5Element extends HTMLElement { /** * Attach a callback that will be executed whenever the component is invalidated * - * @param {InvalidationInfo} callback + * @param callback * @public */ - attachInvalidate(callback: (param: InvalidationInfo) => void) { + attachInvalidate(callback: (param: InvalidationInfo) => void): void { this._invalidationEventProvider.attachEvent("invalidate", callback); } /** * Detach the callback that is executed whenever the component is invalidated * - * @param {InvalidationInfo} callback + * @param callback * @public */ - detachInvalidate(callback: (param: InvalidationInfo) => void) { + detachInvalidate(callback: (param: InvalidationInfo) => void): void { this._invalidationEventProvider.detachEvent("invalidate", callback); } /** * Callback that is executed whenever a monitored child changes its state * - * @param {sting} slotName the slot in which a child was invalidated - * @param { ChangeInfo } childChangeInfo the changeInfo object for the child in the given slot + * @param slotName the slot in which a child was invalidated + * @param childChangeInfo the changeInfo object for the child in the given slot * @private */ _onChildChange(slotName: string, childChangeInfo: ChangeInfo) { @@ -579,24 +576,22 @@ abstract class UI5Element extends HTMLElement { * Returns a singleton event listener for the "change" event of a child in a given slot * * @param slotName the name of the slot, where the child is - * @returns {ChildChangeListener} * @private */ - _getChildChangeListener(slotName: string) { + _getChildChangeListener(slotName: string): ChildChangeListener { if (!this._childChangeListeners.has(slotName)) { this._childChangeListeners.set(slotName, this._onChildChange.bind(this, slotName)); } - return this._childChangeListeners.get(slotName); + return this._childChangeListeners.get(slotName)!; } /** * Returns a singleton slotchange event listener that invalidates the component due to changes in the given slot * * @param slotName the name of the slot, where the slot element (whose slotchange event we're listening to) is - * @returns {SlotChangeListener} * @private */ - _getSlotChangeListener(slotName: string) { + _getSlotChangeListener(slotName: string): SlotChangeListener { if (!this._slotChangeListeners.has(slotName)) { this._slotChangeListeners.set(slotName, this._onSlotChange.bind(this, slotName)); } @@ -661,7 +656,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - onInvalidation(changeInfo: ChangeInfo) {} // eslint-disable-line + onInvalidation(changeInfo: ChangeInfo): void {} // eslint-disable-line /** * Do not call this method directly, only intended to be called by js @@ -749,7 +744,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - getDomRef() { + getDomRef(): HTMLElement | undefined { // If a component set _getRealDomRef to its children, use the return value of this function if (typeof this._getRealDomRef === "function") { return this._getRealDomRef(); @@ -772,7 +767,7 @@ abstract class UI5Element extends HTMLElement { * This is the element that will receive the focus by default. * @public */ - getFocusDomRef() { + getFocusDomRef(): HTMLElement | undefined { const domRef = this.getDomRef(); if (domRef) { const focusRef = domRef.querySelector("[data-sap-focus-ref]") as HTMLElement; @@ -785,17 +780,17 @@ abstract class UI5Element extends HTMLElement { * This is the element that will receive the focus by default. * @public */ - async getFocusDomRefAsync() { + async getFocusDomRefAsync(): Promise { await this._waitForDomRef(); return this.getFocusDomRef(); } /** * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref") - * @param {FocusOptions} focusOptions additional options for the focus + * @param focusOptions additional options for the focus * @public */ - async focus(focusOptions?: FocusOptions) { + async focus(focusOptions?: FocusOptions): Promise { await this._waitForDomRef(); const focusDomRef = this.getFocusDomRef(); @@ -812,9 +807,9 @@ abstract class UI5Element extends HTMLElement { * @param data - additional data for the event * @param cancelable - true, if the user can call preventDefault on the event object * @param bubbles - true, if the event bubbles - * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise + * @returns false, if the event was cancelled (preventDefault called), true otherwise */ - fireEvent(name: string, data?: T, cancelable = false, bubbles = true) { + fireEvent(name: string, data?: T, cancelable = false, bubbles = true): boolean { const eventResult = this._fireEvent(name, data, cancelable, bubbles); const camelCaseEventName = kebabToCamelCase(name); @@ -859,27 +854,27 @@ abstract class UI5Element extends HTMLElement { * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. * @public */ - getSlottedNodes(slotName: string) { + getSlottedNodes(slotName: string): Array { return getSlottedNodesList((this as unknown as Record>)[slotName]) as Array; } /** * Attach a callback that will be executed whenever the component's state is finalized * - * @param {} callback + * @param callback * @public */ - attachComponentStateFinalized(callback: () => void) { + attachComponentStateFinalized(callback: () => void): void { this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback); } /** * Detach the callback that is executed whenever the component's state is finalized * - * @param {} callback + * @param callback * @public */ - detachComponentStateFinalized(callback: () => void) { + detachComponentStateFinalized(callback: () => void): void { this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback); } @@ -888,19 +883,19 @@ abstract class UI5Element extends HTMLElement { * Returns: "rtl", "ltr" or undefined * * @public - * @returns {String|undefined} + * @default undefined */ - get effectiveDir() { + get effectiveDir(): string | undefined { markAsRtlAware(this.constructor as typeof UI5Element); // if a UI5 Element calls this method, it's considered to be rtl-aware return getEffectiveDir(this); } /** * Used to duck-type UI5 elements without using instanceof - * @returns {boolean} * @public + * @default true */ - get isUI5Element() { + get isUI5Element(): boolean { return true; } @@ -933,7 +928,7 @@ abstract class UI5Element extends HTMLElement { /** * @public */ - getStaticAreaItemDomRef() { + getStaticAreaItemDomRef(): Promise { if (!(this.constructor as typeof UI5Element)._needsStaticArea()) { throw new Error("This component does not use the static area"); } @@ -1096,7 +1091,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - static getUniqueDependencies(this: typeof UI5Element) { + static getUniqueDependencies(this: typeof UI5Element): Array { if (!uniqueDependenciesCache.has(this)) { const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index); uniqueDependenciesCache.set(this, filtered); @@ -1107,8 +1102,6 @@ abstract class UI5Element extends HTMLElement { /** * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved - * - * @returns {Promise} */ static whenDependenciesDefined(): Promise> { return Promise.all(this.getUniqueDependencies().map(dep => dep.define())); @@ -1118,18 +1111,16 @@ abstract class UI5Element extends HTMLElement { * Hook that will be called upon custom element definition * * @protected - * @returns {Promise} */ - static async onDefine() { + static async onDefine(): Promise { return Promise.resolve(); } /** * Registers a UI5 Web Component in the browser window object * @public - * @returns {Promise} */ - static async define() { + static async define(): Promise { await boot(); await Promise.all([ @@ -1157,9 +1148,8 @@ abstract class UI5Element extends HTMLElement { * Returns an instance of UI5ElementMetadata.js representing this UI5 Web Component's full metadata (its and its parents') * Note: not to be confused with the "get metadata()" method, which returns an object for this class's metadata only * @public - * @returns {UI5ElementMetadata} */ - static getMetadata() { + static getMetadata(): UI5ElementMetadata { if (this.hasOwnProperty("_metadata")) { // eslint-disable-line return this._metadata; } @@ -1179,7 +1169,6 @@ abstract class UI5Element extends HTMLElement { /** * Always use duck-typing to cover all runtimes on the page. - * @returns {boolean} */ const instanceOfUI5Element = (object: any): object is UI5Element => { return "isUI5Element" in object; diff --git a/packages/base/src/UI5ElementMetadata.ts b/packages/base/src/UI5ElementMetadata.ts index 00dc7c6eef84..2a7c58fefe47 100644 --- a/packages/base/src/UI5ElementMetadata.ts +++ b/packages/base/src/UI5ElementMetadata.ts @@ -46,7 +46,6 @@ type Metadata = { type State = Record>; /** - * * @class * @public */ @@ -107,7 +106,7 @@ class UI5ElementMetadata { * Note: Only intended for use by UI5Element.js * @public */ - static validatePropertyValue(value: PropertyValue, propData: Property) { + static validatePropertyValue(value: PropertyValue, propData: Property): PropertyValue { const isMultiple = propData.multiple; if (isMultiple && value) { return (value as Array).map((propValue: PropertyValue) => validateSingleProperty(propValue, propData)); @@ -119,9 +118,9 @@ class UI5ElementMetadata { * Validates the slot's value and returns it if correct * or throws an exception if not. * Note: Only intended for use by UI5Element.js - * @pubic + * @public */ - static validateSlotValue(value: Node, slotData: Slot) { + static validateSlotValue(value: Node, slotData: Slot): Node { return validateSingleSlot(value, slotData); } @@ -129,7 +128,7 @@ class UI5ElementMetadata { * Returns the tag of the UI5 Element without the scope * @public */ - getPureTag() { + getPureTag(): string { return this.metadata.tag || ""; } @@ -137,7 +136,7 @@ class UI5ElementMetadata { * Returns the tag of the UI5 Element * @public */ - getTag() { + getTag(): string { const pureTag = this.metadata.tag; if (!pureTag) { @@ -156,9 +155,8 @@ class UI5ElementMetadata { * Determines whether a property should have an attribute counterpart * @public * @param propName - * @returns {boolean} */ - hasAttribute(propName: string) { + hasAttribute(propName: string): boolean { const propData = this.getProperties()[propName]; return propData.type !== Object && !propData.noAttribute && !propData.multiple; } @@ -166,24 +164,21 @@ class UI5ElementMetadata { /** * Returns an array with the properties of the UI5 Element (in camelCase) * @public - * @returns {string[]} */ - getPropertiesList() { + getPropertiesList(): Array { return Object.keys(this.getProperties()); } /** * Returns an array with the attributes of the UI5 Element (in kebab-case) * @public - * @returns {string[]} */ - getAttributesList() { + getAttributesList(): Array { return this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase); } /** * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text - * @returns {boolean} */ canSlotText() { return (this.getSlots().default)?.type === Node; @@ -193,7 +188,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element supports any slots * @public */ - hasSlots() { + hasSlots(): boolean { return !!Object.entries(this.getSlots()).length; } @@ -201,7 +196,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element supports any slots with "individualSlots: true" * @public */ - hasIndividualSlots() { + hasIndividualSlots(): boolean { return this.slotsAreManaged() && Object.values(this.getSlots()).some(slotData => slotData.individualSlots); } @@ -209,7 +204,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed * @public */ - slotsAreManaged() { + slotsAreManaged(): boolean { return !!this.metadata.managedSlots; } @@ -217,7 +212,7 @@ class UI5ElementMetadata { * Determines whether this control supports F6 fast navigation * @public */ - supportsF6FastNavigation() { + supportsF6FastNavigation(): boolean { return !!this.metadata.fastNavigation; } @@ -225,7 +220,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of properties and their metadata definitions * @public */ - getProperties() { + getProperties(): Record { if (!this.metadata.properties) { this.metadata.properties = {}; } @@ -236,7 +231,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of events and their metadata definitions * @public */ - getEvents() { + getEvents(): EventData { if (!this.metadata.events) { this.metadata.events = {}; } @@ -247,7 +242,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of slots and their metadata definitions * @public */ - getSlots() { + getSlots(): Record { if (!this.metadata.slots) { this.metadata.slots = {}; } @@ -256,17 +251,15 @@ class UI5ElementMetadata { /** * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change) - * @returns {boolean} */ - isLanguageAware() { + isLanguageAware(): boolean { return !!this.metadata.languageAware; } /** * Determines whether this UI5 Element has any theme dependant carachteristics. - * @returns {boolean} */ - isThemeAware() { + isThemeAware(): boolean { return !!this.metadata.themeAware; } @@ -277,9 +270,8 @@ class UI5ElementMetadata { * @param slotName the name of the slot in which a child was changed * @param type the type of change in the child: "property" or "slot" * @param name the name of the property/slot that changed - * @returns {boolean} */ - shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string) { + shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string): boolean { const config = this.getSlots()[slotName].invalidateOnChildChange; // invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts index 5da5052dca57..6fa8ecc80ba9 100644 --- a/packages/base/src/decorators/customElement.ts +++ b/packages/base/src/decorators/customElement.ts @@ -20,7 +20,7 @@ const customElement = (tagNameOrComponentSettings: string | { languageAware?: boolean, themeAware?: boolean, fastNavigation?: boolean, -}): ClassDecorator => { +} = {}): ClassDecorator => { return (target: any) => { if (!Object.prototype.hasOwnProperty.call(target, "metadata")) { target.metadata = {}; diff --git a/packages/base/src/delegate/ItemNavigation.ts b/packages/base/src/delegate/ItemNavigation.ts index ca6566b3c23d..f4198be50649 100644 --- a/packages/base/src/delegate/ItemNavigation.ts +++ b/packages/base/src/delegate/ItemNavigation.ts @@ -127,7 +127,7 @@ class ItemNavigation { * @public * @param current the new selected item */ - setCurrentItem(current: ITabbable) { + setCurrentItem(current: ITabbable): void { const currentItemIndex = this._getItems().indexOf(current); if (currentItemIndex === -1) { @@ -145,7 +145,7 @@ class ItemNavigation { * @public * @param newRowSize */ - setRowSize(newRowSize: number) { + setRowSize(newRowSize: number): void { this._rowSize = newRowSize; } diff --git a/packages/base/src/delegate/ResizeHandler.ts b/packages/base/src/delegate/ResizeHandler.ts index 8920adb12ddb..f94df55e1602 100644 --- a/packages/base/src/delegate/ResizeHandler.ts +++ b/packages/base/src/delegate/ResizeHandler.ts @@ -56,12 +56,11 @@ const unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => { */ class ResizeHandler { /** - * @static * @public - * @param {*} element UI5 Web Component or DOM Element to be observed - * @param {*} callback Callback to be executed + * @param element UI5 Web Component or DOM Element to be observed + * @param callback Callback to be executed */ - static register(element: HTMLElement, callback: ResizeObserverCallback) { + static register(element: HTMLElement, callback: ResizeObserverCallback): void { let effectiveElement: HTMLElement | undefined = element; if (instanceOfUI5Element(effectiveElement)) { @@ -76,12 +75,11 @@ class ResizeHandler { } /** - * @static * @public - * @param {*} element UI5 Web Component or DOM Element to be unobserved - * @param {*} callback Callback to be removed + * @param element UI5 Web Component or DOM Element to be unobserved + * @param callback Callback to be removed */ - static deregister(element: HTMLElement, callback: ResizeObserverCallback) { + static deregister(element: HTMLElement, callback: ResizeObserverCallback): void { let effectiveElement: HTMLElement | undefined = element; if (instanceOfUI5Element(effectiveElement)) { diff --git a/packages/base/src/i18nBundle.ts b/packages/base/src/i18nBundle.ts index 637a1ffc9227..c7243d389301 100644 --- a/packages/base/src/i18nBundle.ts +++ b/packages/base/src/i18nBundle.ts @@ -27,9 +27,8 @@ class I18nBundle { * Returns a text in the currently loaded language * * @public - * @param {Object|String} textObj key/defaultText pair or just the key + * @param textObj key/defaultText pair or just the key * @param params Values for the placeholders - * @returns {string} */ getText(textObj: I18nText | string, ...params: Array): string { if (typeof textObj === "string") { @@ -56,7 +55,6 @@ class I18nBundle { * * @public * @param packageName - * @returns { I18nBundle } */ const getI18nBundleSync = (packageName: string): I18nBundle => { if (I18nBundleInstances.has(packageName)) { @@ -73,7 +71,6 @@ const getI18nBundleSync = (packageName: string): I18nBundle => { * * @public * @param packageName - * @returns { Promise } */ const getI18nBundle = async (packageName: string): Promise => { if (customGetI18nBundle) { @@ -92,7 +89,7 @@ const getI18nBundle = async (packageName: string): Promise => { * @public * @param customGet the function to use instead of the standard getI18nBundle implementation */ -const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter) => { +const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter): void => { customGetI18nBundle = customGet; }; diff --git a/packages/base/src/types/AnimationMode.ts b/packages/base/src/types/AnimationMode.ts index d4c03826aaae..9359c21b0b9e 100644 --- a/packages/base/src/types/AnimationMode.ts +++ b/packages/base/src/types/AnimationMode.ts @@ -1,31 +1,23 @@ /** * Different types of AnimationMode. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.AnimationMode */ enum AnimationMode { /** * @public - * @type {Full} */ Full = "full", /** * @public - * @type {Basic} */ Basic = "basic", /** * @public - * @type {Minimal} */ Minimal = "minimal", /** * @public - * @type {None} */ None = "none", } diff --git a/packages/base/src/types/CSSColor.ts b/packages/base/src/types/CSSColor.ts index c81819652ca7..5ed1bfd391d8 100644 --- a/packages/base/src/types/CSSColor.ts +++ b/packages/base/src/types/CSSColor.ts @@ -4,10 +4,6 @@ import DataType from "./DataType.js"; * @class * CSSColor data type. * - * @extends sap.ui.webc.base.types.DataType - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.CSSColor * @public */ class CSSColor extends DataType { diff --git a/packages/base/src/types/CSSSize.ts b/packages/base/src/types/CSSSize.ts index a05505630dd8..030485d25946 100644 --- a/packages/base/src/types/CSSSize.ts +++ b/packages/base/src/types/CSSSize.ts @@ -4,10 +4,6 @@ import DataType from "./DataType.js"; * @class * CSSSize data type. * - * @extends sap.ui.webc.base.types.DataType - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.CSSSize * @public */ class CSSSize extends DataType { diff --git a/packages/base/src/types/CalendarType.ts b/packages/base/src/types/CalendarType.ts index 457d17929dd2..e83a0e3c17d2 100644 --- a/packages/base/src/types/CalendarType.ts +++ b/packages/base/src/types/CalendarType.ts @@ -1,36 +1,27 @@ /** * Different calendar types. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.CalendarType */ enum CalendarType { /** * @public - * @type {Gregorian} */ Gregorian = "Gregorian", /** * @public - * @type {Islamic} */ Islamic = "Islamic", /** * @public - * @type {Japanese} */ Japanese = "Japanese", /** * @public - * @type {Buddhist} */ Buddhist = "Buddhist", /** * @public - * @type {Persian} */ Persian = "Persian", } diff --git a/packages/base/src/types/DOMReference.ts b/packages/base/src/types/DOMReference.ts index cc83ad6f89b1..85756fabf2b8 100644 --- a/packages/base/src/types/DOMReference.ts +++ b/packages/base/src/types/DOMReference.ts @@ -5,10 +5,6 @@ import DataType from "./DataType.js"; * DOM Element reference or ID. * Note: If an ID is passed, it is expected to be part of the same document element as the consuming component. * - * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.DOMReference * @public */ class DOMReference extends DataType { diff --git a/packages/base/src/types/DataType.ts b/packages/base/src/types/DataType.ts index 51523f359aac..571355de5bd1 100644 --- a/packages/base/src/types/DataType.ts +++ b/packages/base/src/types/DataType.ts @@ -1,20 +1,15 @@ import { PropertyValue } from "../UI5ElementMetadata.js"; /** + * @class * Base class for all data types. * - * @class - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.DataType * @public */ class DataType { /** * Checks if the value is valid for its data type. * @public - * @abstract - * @returns {Boolean} */ // eslint-disable-next-line static isValid(value: any): boolean { diff --git a/packages/base/src/types/Float.ts b/packages/base/src/types/Float.ts index d11ec6f941e9..eb92ecd7bcdf 100644 --- a/packages/base/src/types/Float.ts +++ b/packages/base/src/types/Float.ts @@ -6,9 +6,6 @@ import DataType from "./DataType.js"; * Float data type. * * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.Float * @public */ class Float extends DataType { diff --git a/packages/base/src/types/Integer.ts b/packages/base/src/types/Integer.ts index fb8bf140ae08..f88c57e9e393 100644 --- a/packages/base/src/types/Integer.ts +++ b/packages/base/src/types/Integer.ts @@ -6,9 +6,6 @@ import DataType from "./DataType.js"; * Integer data type. * * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.Integer * @public */ class Integer extends DataType { diff --git a/packages/base/src/types/InvisibleMessageMode.ts b/packages/base/src/types/InvisibleMessageMode.ts index 173ad5cd814a..2911de06a85e 100644 --- a/packages/base/src/types/InvisibleMessageMode.ts +++ b/packages/base/src/types/InvisibleMessageMode.ts @@ -1,25 +1,19 @@ /** * Enumeration for different mode behaviors of the InvisibleMessage. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.InvisibleMessageMode */ const InvisibleMessageMode = { /** * Indicates that updates to the region should be presented at the next graceful opportunity, * such as at the end of reading the current sentence, or when the user pauses typing. * @public - * @type {Polite} */ Polite: "Polite", /** * Indicates that updates to the region have the highest priority and should be presented to the user immediately. * @public - * @type {Assertive} */ Assertive: "Assertive", } as const; diff --git a/packages/base/src/types/ItemNavigationBehavior.ts b/packages/base/src/types/ItemNavigationBehavior.ts index a19be96b11f5..8da0edac415f 100644 --- a/packages/base/src/types/ItemNavigationBehavior.ts +++ b/packages/base/src/types/ItemNavigationBehavior.ts @@ -1,24 +1,18 @@ /** * Different behavior for ItemNavigation. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.ItemNavigationBehavior */ enum ItemNavigationBehavior { /** * Static behavior: navigations stops at the first or last item. * @public - * @type {Static} */ Static = "Static", /** * Cycling behavior: navigating past the last item continues with the first and vice versa. * @public - * @type {Cyclic} */ Cyclic = "Cyclic", } diff --git a/packages/base/src/types/NavigationMode.ts b/packages/base/src/types/NavigationMode.ts index b9692e16ef6f..193e38c83b86 100644 --- a/packages/base/src/types/NavigationMode.ts +++ b/packages/base/src/types/NavigationMode.ts @@ -1,31 +1,23 @@ /** * Different navigation modes for ItemNavigation. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.NavigationMode */ enum NavigationMode { /** * @public - * @type {Auto} */ Auto = "Auto", /** * @public - * @type {Vertical} */ Vertical = "Vertical", /** * @public - * @type {Horizontal} */ Horizontal = "Horizontal", /** * @public - * @type {Paging} */ Paging = "Paging", } diff --git a/packages/base/src/types/ValueState.ts b/packages/base/src/types/ValueState.ts index 4ca2cb00a250..339399f2e712 100644 --- a/packages/base/src/types/ValueState.ts +++ b/packages/base/src/types/ValueState.ts @@ -1,45 +1,31 @@ /** * Different types of ValueStates. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.ValueState */ enum ValueState { /** - * * @public - * @type {None} */ None = "None", /** - * * @public - * @type {Success} */ Success = "Success", /** - * * @public - * @type {Warning} */ Warning = "Warning", /** - * * @public - * @type {Error} */ Error = "Error", /** - * * @public - * @type {Information} */ Information = "Information", } diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index 70b4d323b01e..f945b5beee44 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -5,6 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import BarDesign from "./types/BarDesign.js"; +import type { IBar } from "./Interfaces.js"; // Template import BarTemplate from "./generated/templates/BarTemplate.lit.js"; @@ -30,15 +31,6 @@ import BarCss from "./generated/themes/Bar.css.js"; * The default slot will be centered in the available space between the startContent and the endContent areas, * therefore it might not always be centered in the entire bar. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-bar exposes the following CSS Shadow Parts: - *
      - *
    • bar - Used to style the wrapper of the content of the component
      • - *
    - * *

    Keyboard Handling

    * *

    Fast Navigation

    @@ -51,12 +43,10 @@ import BarCss from "./generated/themes/Bar.css.js"; * * import "@ui5/webcomponents-fiori/dist/Bar.js"; * + * @csspart bar - Used to style the wrapper of the content of the component * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.Bar - * @implements sap.ui.webc.fiori.IBar - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-bar + * @implements { IBar } + * @extends UI5Element * @public * @since 1.0.0-rc.11 */ @@ -67,13 +57,11 @@ import BarCss from "./generated/themes/Bar.css.js"; styles: BarCss, template: BarTemplate, }) -class Bar extends UI5Element { +class Bar extends UI5Element implements IBar { /** * Defines the component's design. * - * @type {sap.ui.webc.fiori.types.BarDesign} - * @name sap.ui.webc.fiori.Bar.prototype.design - * @defaultvalue "Header" + * @default "Header" * @public */ @property({ type: BarDesign, defaultValue: BarDesign.Header }) @@ -81,9 +69,6 @@ class Bar extends UI5Element { /** * Defines the content at the start of the bar. - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.startContent - * @slot * @public */ @slot({ type: HTMLElement }) @@ -91,9 +76,6 @@ class Bar extends UI5Element { /** * Defines the content in the middle of the bar. - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.default - * @slot middleContent * @public */ @slot({ type: HTMLElement, "default": true }) @@ -101,9 +83,6 @@ class Bar extends UI5Element { /** * Defines the content at the end of the bar. - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.endContent - * @slot * @public */ @slot({ type: HTMLElement }) diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index d7f4294f3271..b5aedadd5d35 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -68,10 +68,7 @@ type BarcodeScannerDialogScanErrorEventDetail = { * For a list of supported barcode formats, see the zxing-js/library documentation. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.BarcodeScannerDialog - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-barcode-scanner-dialog + * @extends UI5Element * @public * @since 1.0.0-rc.15 */ @@ -90,14 +87,19 @@ type BarcodeScannerDialogScanErrorEventDetail = { /** * Fires when the scan is completed successfuuly. * - * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-success * @param {string} text the scan result as string * @param {Object} rawBytes the scan result as a Uint8Array * @public */ @event("scan-success", { detail: { + /** + * @public + */ text: { type: String }, + /** + * @public + */ rawBytes: { type: Object }, }, }) @@ -105,12 +107,14 @@ type BarcodeScannerDialogScanErrorEventDetail = { /** * Fires when the scan fails with error. * - * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-error * @param {string} message the error message * @public */ @event("scan-error", { detail: { + /** + * @public + */ message: { type: String }, }, }) @@ -119,9 +123,7 @@ class BarcodeScannerDialog extends UI5Element { /** * Indicates whether a loading indicator should be displayed in the dialog. * - * @type {boolean} - * @name sap.ui.webc.fiori.BarcodeScannerDialog.prototype.loading - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) @@ -142,12 +144,9 @@ class BarcodeScannerDialog extends UI5Element { /** * Shows a dialog with the camera videostream. Starts a scan session. - * @method - * @name sap.ui.webc.fiori.BarcodeScannerDialog#show - * @returns {void} * @public */ - show() { + show(): void { if (this.loading) { console.warn("Barcode scanning is already in progress."); // eslint-disable-line return; @@ -170,12 +169,9 @@ class BarcodeScannerDialog extends UI5Element { /** * Closes the dialog and the scan session. - * @method - * @name sap.ui.webc.fiori.BarcodeScannerDialog#close - * @returns {void} * @public */ - close() { + close():void { this._closeDialog(); this.loading = false; } diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 346d3a6cb49e..67f4bf0f143a 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -104,12 +104,10 @@ type DynamicSideContentLayoutChangeEventDetail = { * import "@ui5/webcomponents-fiori/dist/DynamicSideContent"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.DynamicSideContent - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-dynamic-side-content + * @extends UI5Element * @public * @since 1.1.0 + * @slot {Array} default - Defines the main content. */ @customElement({ tag: "ui5-dynamic-side-content", @@ -119,7 +117,6 @@ type DynamicSideContentLayoutChangeEventDetail = { }) /** * Fires when the current breakpoint has been changed. - * @event sap.ui.webc.fiori.DynamicSideContent#layout-change * @param {string} currentBreakpoint the current breakpoint. * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint. * @param {boolean} mainContentVisible visibility of the main content. @@ -128,15 +125,27 @@ type DynamicSideContentLayoutChangeEventDetail = { */ @event("layout-change", { detail: { + /** + * @public + */ currentBreakpoint: { type: String, }, + /** + * @public + */ previousBreakpoint: { type: String, }, + /** + * @public + */ mainContentVisible: { type: Boolean, }, + /** + * @public + */ sideContentVisible: { type: Boolean, }, @@ -146,9 +155,7 @@ class DynamicSideContent extends UI5Element { /** * Defines the visibility of the main content. * - * @type {boolean} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent - * @defaultvalue false + * @default false * @public * */ @@ -158,9 +165,7 @@ class DynamicSideContent extends UI5Element { /** * Defines the visibility of the side content. * - * @type {boolean} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent - * @defaultvalue false + * @default false * @public * */ @@ -179,9 +184,7 @@ class DynamicSideContent extends UI5Element { *
  • End
    • * * - * @type {sap.ui.webc.fiori.types.SideContentPosition} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition - * @defaultvalue "End" + * @default "End" * @public * */ @@ -202,9 +205,7 @@ class DynamicSideContent extends UI5Element { *
  • NeverShow
    • * * - * @type {sap.ui.webc.fiori.types.SideContentVisibility} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility - * @defaultvalue "ShowAboveS" + * @default "ShowAboveS" * @public * */ @@ -224,9 +225,7 @@ class DynamicSideContent extends UI5Element { *
  • OnMinimumWidth
    • * * - * @type {sap.ui.webc.fiori.types.SideContentFallDown} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown - * @defaultvalue "OnMinimumWidth" + * @default "OnMinimumWidth" * @public * */ @@ -239,9 +238,7 @@ class DynamicSideContent extends UI5Element { * except for phone, where the main and side contents are switching visibility * using the toggle method. * - * @type {boolean}] - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit - * @defaultvalue false + * @default false * @public * */ @@ -272,21 +269,9 @@ class DynamicSideContent extends UI5Element { @property({ noAttribute: true }) _currentBreakpoint!: string; - /** - * Defines the main content. - * - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default - * @slot - * @public - */ - /** * Defines the side content. * - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent - * @slot * @public */ @slot() @@ -319,11 +304,10 @@ class DynamicSideContent extends UI5Element { /** * Toggles visibility of main and side contents on S screen size (mobile device). + * * @public - * @method - * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents */ - toggleContents() { + toggleContents(): void { if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) { this._toggled = !this._toggled; } diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 46daf7a167bd..275318e56f48 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -17,13 +17,9 @@ import type FilterItemOption from "./FilterItemOption.js"; * import @ui5/webcomponents-fiori/dist/FilterItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.FilterItem - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @tagname ui5-filter-item - * @implements sap.ui.webc.fiori.IFilterItem * @public */ @customElement("ui5-filter-item") @@ -31,9 +27,7 @@ class FilterItem extends UI5Element { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.FilterItem.prototype.text - * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -42,9 +36,7 @@ class FilterItem extends UI5Element { /** * Defines the additional text of the component. * - * @name sap.ui.webc.fiori.FilterItem.prototype.additionalText - * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -52,9 +44,6 @@ class FilterItem extends UI5Element { /** * Defines the values list. - * @name sap.ui.webc.fiori.FilterItem.prototype.values - * @type {sap.ui.webc.fiori.IFilterItemOption[]} - * @slot values * @public */ @slot() diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index 6fe58bfb99ef..ab581608d976 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -16,13 +16,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * import @ui5/webcomponents-fiori/dist/FilterItemOption.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.FilterItemOption - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @tagname ui5-filter-item-option - * @implements sap.ui.webc.fiori.IFilterItemOption * @public */ @customElement("ui5-filter-item-option") @@ -30,9 +26,7 @@ class FilterItemOption extends UI5Element { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.FilterItemOption.prototype.text - * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -41,9 +35,7 @@ class FilterItemOption extends UI5Element { /** * Defines if the component is selected. * - * @name sap.ui.webc.fiori.FilterItemOption.prototype.selected - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index e88131592c32..d96ed508deeb 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -125,10 +125,7 @@ type AccessibilityRoles = { * import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.FlexibleColumnLayout - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-flexible-column-layout + * @extends UI5Element * @public * @since 1.0.0-rc.8 */ @@ -145,24 +142,44 @@ type AccessibilityRoles = { * Fired when the layout changes via user interaction by clicking the arrows * or by changing the component size due to resizing. * - * @param {sap.ui.webc.fiori.types.FCLLayout} layout The current layout + * @param {FCLLayout} layout The current layout * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0] * @param {boolean} startColumnVisible Indicates if the start column is currently visible * @param {boolean} midColumnVisible Indicates if the middle column is currently visible * @param {boolean} endColumnVisible Indicates if the end column is currently visible * @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows * @param {boolean} resize Indicates if the layout is changed via resizing - * @event sap.ui.webc.fiori.FlexibleColumnLayout#layout-change * @public */ @event("layout-change", { detail: { + /** + * @public + */ layout: { type: FCLLayout }, + /** + * @public + */ columnLayout: { type: Array }, + /** + * @public + */ startColumnVisible: { type: Boolean }, + /** + * @public + */ midColumnVisible: { type: Boolean }, + /** + * @public + */ endColumnVisible: { type: Boolean }, + /** + * @public + */ arrowsUsed: { type: Boolean }, + /** + * @public + */ resize: { type: Boolean }, }, }) @@ -175,9 +192,7 @@ class FlexibleColumnLayout extends UI5Element { *

    * For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns * in 67%/33% proportion. - * @type {sap.ui.webc.fiori.types.FCLLayout} - * @defaultvalue "OneColumn" - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.layout + * @default "OneColumn" * @public */ @property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn }) @@ -187,9 +202,7 @@ class FlexibleColumnLayout extends UI5Element { * Defines the visibility of the arrows, * used for expanding and shrinking the columns. * - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.hideArrows + * @default false * @public * @since 1.0.0-rc.15 */ @@ -210,8 +223,7 @@ class FlexibleColumnLayout extends UI5Element { * - startArrowContainerAccessibleName: the text that the first arrow container (between the begin and mid columns) will have as aria-label * - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label * - * @type {object} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts + * @default {} * @public * @since 1.0.0-rc.11 */ @@ -228,9 +240,8 @@ class FlexibleColumnLayout extends UI5Element { * - endArrowContainerRole: the accessibility role for the second arrow container (between the mid and end columns) * - endColumnRole: the accessibility role for the endColumn * - * @type {object} + * @default {} * @public - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles * @since 1.1.0 */ @property({ type: Object }) @@ -239,8 +250,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the component width in px. * - * @type {sap.ui.webc.base.types.Float} - * @defaultvalue 0 + * @default 0 * @private */ @property({ validator: Float, defaultValue: 0 }) @@ -251,8 +261,7 @@ class FlexibleColumnLayout extends UI5Element { * based on both the layout property and the screen size. * Example: [67%, 33%, 0], [25%, 50%, 25%], etc. * - * @type {object} - * @defaultvalue undefined + * @default undefined * @private */ @property({ type: Object, defaultValue: undefined }) @@ -261,8 +270,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the visible columns count - 1, 2 or 3. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 1 + * @default 1 * @private */ @property({ validator: Integer, defaultValue: 0 }) @@ -271,18 +279,13 @@ class FlexibleColumnLayout extends UI5Element { /** * Allows the user to replace the whole layouts configuration * - * @type {object} * @private - * @sap-restricted */ @property({ type: Object, defaultValue: undefined }) _layoutsConfiguration?: LayoutConfiguration; /** * Defines the content in the start column. - * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn * @public */ @slot() @@ -290,9 +293,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the middle column. - * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumn * @public */ @slot() @@ -300,9 +300,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the end column. - * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumn * @public */ @slot() @@ -507,10 +504,7 @@ class FlexibleColumnLayout extends UI5Element { *

    * For example: ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, * where the numbers represents the width of the start, middle and end columns. - * @readonly - * @type {array} - * @defaultvalue ["100%", 0, 0] - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.columnLayout + * @default undefined * @public */ get columnLayout(): ColumnLayout | undefined { @@ -519,10 +513,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the start column is visible. - * @readonly - * @defaultvalue true - * @type {boolean} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible + * @default true * @public */ get startColumnVisible(): boolean { @@ -535,10 +526,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the middle column is visible. - * @readonly - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumnVisible + * @default false * @public */ get midColumnVisible(): boolean { @@ -551,10 +539,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the end column is visible. - * @readonly - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumnVisible + * @default false * @public */ get endColumnVisible(): boolean { @@ -567,10 +552,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns the number of currently visible columns. - * @readonly - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 1 - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.visibleColumns + * @default 1 * @public */ get visibleColumns(): number { diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 30832e3e8691..8184553ad159 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -11,6 +11,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import Title from "@ui5/webcomponents/dist/Title.js"; import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import type IButton from "@ui5/webcomponents/dist/Button.js"; import IllustrationMessageSize from "./types/IllustrationMessageSize.js"; import IllustrationMessageType from "./types/IllustrationMessageType.js"; import "./illustrations/BeforeSearch.js"; @@ -61,10 +62,7 @@ import IllustratedMessageTemplate from "./generated/templates/IllustratedMessage * import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.IllustratedMessage - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-illustrated-message + * @extends UI5Element * @public * @since 1.0.0-rc.15 */ @@ -92,9 +90,7 @@ class IllustratedMessage extends UI5Element { * You can import them removing the Tnt prefix like this: *
    * import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js"; - * @type {sap.ui.webc.fiori.types.IllustrationMessageType} - * @defaultvalue "BeforeSearch" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.name + * @default "BeforeSearch" * @public */ @property({ type: IllustrationMessageType, defaultValue: IllustrationMessageType.BeforeSearch }) @@ -107,9 +103,7 @@ class IllustratedMessage extends UI5Element { * As IllustratedMessage adapts itself around the Illustration, the other * elements of the component are displayed differently on the different breakpoints/illustration sizes. * - * @type {sap.ui.webc.fiori.types.IllustrationMessageSize} - * @defaultvalue "Auto" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.size + * @default "Auto" * @public * @since 1.5.0 */ @@ -122,9 +116,7 @@ class IllustratedMessage extends UI5Element { * Note: Using this property, the default subtitle text of illustration will be overwritten. *

    * Note: Using subtitle slot, the default of this property will be overwritten. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.subtitleText + * @default "" * @public */ @property() @@ -134,9 +126,7 @@ class IllustratedMessage extends UI5Element { * Defines the title of the component. *

    * Note: Using this property, the default title text of illustration will be overwritten. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.titleText + * @default "" * @public */ @property() @@ -145,9 +135,7 @@ class IllustratedMessage extends UI5Element { /** * Receives id(or many ids) of the elements that label the component. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.accessibleNameRef + * @default "" * @public * @since 1.7.0 */ @@ -159,9 +147,7 @@ class IllustratedMessage extends UI5Element { * * Note: Used for accessibility purposes only. * - * @type {sap.ui.webc.main.types.TitleLevel} - * @defaultvalue "H2" - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.titleLevel + * @default "H2" * @public * @since 1.20.0 */ @@ -172,7 +158,6 @@ class IllustratedMessage extends UI5Element { * Illustration breakpoint variant for the Spot size. * * @private - * @type {String} * @since 1.9.0 */ @property({ noAttribute: true }) @@ -182,7 +167,6 @@ class IllustratedMessage extends UI5Element { * Illustration breakpoint variant for the Scene size. * * @private - * @type {String} * @since 1.9.0 */ @property({ noAttribute: true }) @@ -192,7 +176,6 @@ class IllustratedMessage extends UI5Element { * Illustration breakpoint variant for the Dialog size. * * @private - * @type {String} * @since 1.9.0 */ @property({ noAttribute: true }) @@ -209,9 +192,6 @@ class IllustratedMessage extends UI5Element { * Defines the title of the component. *

    * Note: Using this slot, the default title text of illustration and the value of title property will be overwritten. - * @type {HTMLElement} - * @slot title - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.title * @public * @since 1.7.0 */ @@ -222,9 +202,6 @@ class IllustratedMessage extends UI5Element { * Defines the subtitle of the component. *

    * Note: Using this slot, the default subtitle text of illustration and the value of subtitleText property will be overwritten. - * @type {HTMLElement} - * @slot subtitle - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.subtitle * @public * @since 1.0.0-rc.16 */ @@ -233,13 +210,10 @@ class IllustratedMessage extends UI5Element { /** * Defines the component actions. - * @type {sap.ui.webc.main.IButton[]} - * @slot actions - * @name sap.ui.webc.fiori.IllustratedMessage.prototype.default * @public */ @slot({ type: HTMLElement, "default": true }) - actions!: Array; + actions!: Array; illustrationTitle?: string; illustrationSubtitle?: string; diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 30f113637518..cff0b32b657c 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,142 +1,63 @@ -/** - * Interface for components that may be slotted inside ui5-page as header and footer. - * - * @name sap.ui.webc.fiori.IBar - * @interface - * @public - */ -const IBar = "sap.ui.webc.fiori.IBar"; - -/** - * Interface for components that may be slotted inside ui5-view-settings-dialog as filter items - * - * @name sap.ui.webc.fiori.IFilterItem - * @interface - * @public - */ -const IFilterItem = "sap.ui.webc.fiori.IFilterItem"; +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import TimelineLayout from "./types/TimelineLayout.js"; /** - * Interface for components that may be slotted inside ui5-filter-item as values + * Interface for components that may be slotted inside ui5-page as header and footer. * - * @name sap.ui.webc.fiori.IFilterItemOption - * @interface * @public */ -const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption"; +interface IBar extends HTMLElement {} /** * Interface for components that can be slotted inside ui5-media-gallery as items. * - * @name sap.ui.webc.fiori.IMediaGalleryItem - * @interface * @public */ -const IMediaGalleryItem = "sap.ui.webc.fiori.IMediaGalleryItem"; - -/** - * Interface for components that may be slotted as an action inside ui5-li-notification and ui5-li-notification-group - * - * @name sap.ui.webc.fiori.INotificationAction - * @interface - * @public - */ -const INotificationAction = "sap.ui.webc.fiori.INotificationAction"; - -/** - * Interface for components that may be slotted inside a notification list - * - * @name sap.ui.webc.fiori.INotificationListItem - * @interface - * @public - */ -const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem"; +interface IMediaGalleryItem extends ITabbable { + selected: boolean, + disabled: boolean, + focused: boolean, +} /** * Interface for components that may be slotted inside ui5-product-switch as items * - * @name sap.ui.webc.fiori.IProductSwitchItem - * @interface - * @public - */ -const IProductSwitchItem = "sap.ui.webc.fiori.IProductSwitchItem"; - -/** - * Interface for components that may be slotted inside ui5-shellbar as items - * - * @name sap.ui.webc.fiori.IShellBarItem - * @interface - * @public - */ -const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem"; - -/** - * Interface for components that may be slotted inside ui5-side-navigation as items - * - * @name sap.ui.webc.fiori.ISideNavigationItem - * @interface * @public */ -const ISideNavigationItem = "sap.ui.webc.fiori.ISideNavigationItem"; - -/** - * Interface for components that may be slotted inside ui5-side-navigation-item as sub-items - * - * @name sap.ui.webc.fiori.ISideNavigationSubItem - * @interface - * @public - */ -const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; - -/** - * Interface for components that may be slotted inside ui5-view-settings-dialog as sort items - * - * @name sap.ui.webc.fiori.ISortItem - * @interface - * @public - */ -const ISortItem = "sap.ui.webc.fiori.ISortItem"; +interface IProductSwitchItem extends ITabbable { + titleText: string, + subtitleText: string, + icon: string, + target: string, + targetSrc: string, + selected: boolean, +} /** * Interface for components that may be slotted inside ui5-timeline as items * - * @name sap.ui.webc.fiori.ITimelineItem - * @interface * @public */ -const ITimelineItem = "sap.ui.webc.fiori.ITimelineItem"; +interface ITimelineItem extends UI5Element, ITabbable { + layout: `${TimelineLayout}`, + icon: string, + _lineWidth: string, + nameClickable: boolean, + focusLink: () => void, +} /** * Interface for components that may be slotted inside ui5-upload-collection as items * - * @name sap.ui.webc.fiori.IUploadCollectionItem - * @interface - * @public - */ -const IUploadCollectionItem = "sap.ui.webc.fiori.IUploadCollectionItem"; - -/** - * Interface for components that may be slotted inside ui5-wizard as wizard steps - * - * @name sap.ui.webc.fiori.IWizardStep - * @interface * @public */ -const IWizardStep = "sap.ui.webc.fiori.IWizardStep"; +interface IUploadCollectionItem extends HTMLElement { } export { IBar, - IFilterItem, - IFilterItemOption, IMediaGalleryItem, - INotificationAction, - INotificationListItem, IProductSwitchItem, - IShellBarItem, - ISideNavigationItem, - ISideNavigationSubItem, - ISortItem, ITimelineItem, IUploadCollectionItem, - IWizardStep, }; diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index f3dba1e4f176..65417685cb04 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -19,6 +19,7 @@ import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js"; import MediaGalleryLayout from "./types/MediaGalleryLayout.js"; import MediaGalleryMenuHorizontalAlign from "./types/MediaGalleryMenuHorizontalAlign.js"; import MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVerticalAlign.js"; +import type IMediaGalleryItem from "./MediaGalleryItem.js"; // Styles import MediaGalleryCss from "./generated/themes/MediaGallery.css.js"; @@ -75,11 +76,7 @@ const COLUMNS_COUNT: Record = { * import "@ui5/webcomponents-fiori/dist/MediaGalleryItem"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.MediaGallery - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-media-gallery - * @appenddocs sap.ui.webc.fiori.MediaGalleryItem + * @extends UI5Element * @public * @since 1.1.0 */ @@ -99,12 +96,14 @@ const COLUMNS_COUNT: Record = { /** * Fired when selection is changed by user interaction. * - * @event sap.ui.webc.fiori.MediaGallery#selection-change * @param {HTMLElement} item the selected item. * @public */ @event("selection-change", { detail: { + /** + * @public + */ item: { type: HTMLElement }, }, }) @@ -112,7 +111,6 @@ const COLUMNS_COUNT: Record = { /** * Fired when the thumbnails overflow button is clicked. * - * @event sap.ui.webc.fiori.MediaGallery#overflow-click * @public */ @event("overflow-click") @@ -122,7 +120,6 @@ const COLUMNS_COUNT: Record = { * The display area is the central area that contains * the enlarged content of the currently selected item. * - * @event sap.ui.webc.fiori.MediaGallery#display-area-click * @public */ @event("display-area-click") @@ -133,9 +130,7 @@ class MediaGallery extends UI5Element { * If false, only up to five thumbnails are rendered, followed by * an overflow button that shows the count of the remaining thumbnails. * - * @type {boolean} - * @name sap.ui.webc.fiori.MediaGallery.prototype.showAllThumbnails - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -148,9 +143,7 @@ class MediaGallery extends UI5Element { * The display area is the central area that contains * the enlarged content of the currently selected item. * - * @type {boolean} - * @name sap.ui.webc.fiori.MediaGallery.prototype.interactiveDisplayArea - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -159,9 +152,7 @@ class MediaGallery extends UI5Element { /** * Determines the layout of the component. * - * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} - * @name sap.ui.webc.fiori.MediaGallery.prototype.layout - * @defaultvalue "Auto" + * @default "Auto" * @public */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Auto }) @@ -171,9 +162,7 @@ class MediaGallery extends UI5Element { * Determines the horizontal alignment of the thumbnails menu * vs. the central display area. * - * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign} - * @name sap.ui.webc.fiori.MediaGallery.prototype.menuHorizontalAlign - * @defaultvalue "Left" + * @default "Left" * @public */ @property({ type: MediaGalleryMenuHorizontalAlign, defaultValue: MediaGalleryMenuHorizontalAlign.Left }) @@ -183,9 +172,7 @@ class MediaGallery extends UI5Element { * Determines the vertical alignment of the thumbnails menu * vs. the central display area. * - * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign} - * @name sap.ui.webc.fiori.MediaGallery.prototype.menuVerticalAlign - * @defaultvalue "Bottom" + * @default "Bottom" * @public */ @property({ type: MediaGalleryMenuVerticalAlign, defaultValue: MediaGalleryMenuVerticalAlign.Bottom }) @@ -196,8 +183,7 @@ class MediaGallery extends UI5Element { * (esp. needed when the app did not specify a fixed layout type * but selected Auto layout type). * - * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} - * @defaultvalue "Vertical" + * @default "Vertical" * @private */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Vertical }) @@ -228,9 +214,6 @@ class MediaGallery extends UI5Element { *

    * Note: Use the ui5-media-gallery-item component to define the desired items. * - * @type {sap.ui.webc.fiori.IMediaGalleryItem[]} - * @name sap.ui.webc.fiori.MediaGallery.prototype.default - * @slot items * @public */ @slot({ @@ -239,7 +222,7 @@ class MediaGallery extends UI5Element { invalidateOnChildChange: true, "default": true, }) - items!: Array; + items!: Array; _itemNavigation: ItemNavigation; _onResize: () => void; diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index 47de170004c5..69dbb853e912 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -7,8 +7,8 @@ import "@ui5/webcomponents-icons/dist/background.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js"; +import type { IMediaGalleryItem } from "./Interfaces.js"; // Styles import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js"; @@ -38,12 +38,9 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp * import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js"; (comes with ui5-media-gallery) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.MediaGalleryItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-media-gallery-item + * @extends UI5Element * @public - * @implements sap.ui.webc.fiori.IMediaGalleryItem + * @implements {IMediaGalleryItem} * @since 1.1.0 */ @customElement({ @@ -53,13 +50,11 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp template: MediaGalleryItemTemplate, dependencies: [Icon], }) -class MediaGalleryItem extends UI5Element implements ITabbable { +class MediaGalleryItem extends UI5Element implements IMediaGalleryItem { /** * Defines the selected state of the component. * - * @type {boolean} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.selected - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -68,9 +63,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable { /** * Defines whether the component is in disabled state. * - * @type {boolean} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -85,9 +78,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable { *
  • Wide
    • * * - * @type {sap.ui.webc.fiori.types.MediaGalleryItemLayout} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.layout - * @defaultvalue "Square" + * @default "Square" * @public */ @property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square }) @@ -144,9 +135,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable { /** * Defines the content of the component. * - * @type {HTMLElement} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.default - * @slot content * @public */ @slot({ type: HTMLElement, "default": true }) @@ -155,9 +143,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable { /** * Defines the content of the thumbnail. * - * @type {HTMLElement} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.thumbnail - * @slot thumbnail * @public */ @slot() diff --git a/packages/fiori/src/NotificationAction.ts b/packages/fiori/src/NotificationAction.ts index 06788957f2a2..94d9f85a98a2 100644 --- a/packages/fiori/src/NotificationAction.ts +++ b/packages/fiori/src/NotificationAction.ts @@ -15,12 +15,7 @@ type NotificationActionClickEventDetail = { * used in the ui5-li-notification and the ui5-li-notification-group items. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationAction - * @extends sap.ui.webc.base.UI5Element - * @abstract - * @tagname ui5-notification-action - * @implements sap.ui.webc.fiori.INotificationAction + * @extends UI5Element * @public */ @customElement("ui5-notification-action") @@ -28,7 +23,6 @@ type NotificationActionClickEventDetail = { /** * Fired, when the action is pressed. * - * @event sap.ui.webc.fiori.NotificationAction#click * @param {HTMLElement} targetRef DOM ref of the clicked element * @public */ @@ -41,10 +35,8 @@ class NotificationAction extends UI5Element { /** * Defines the text of the ui5-notification-action. * - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.text */ @property() text!: string; @@ -54,10 +46,8 @@ class NotificationAction extends UI5Element { *

    * Note: a disabled action can't be pressed or focused, and it is not in the tab chain. * - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.disabled */ @property({ type: Boolean }) disabled!: boolean; @@ -65,10 +55,8 @@ class NotificationAction extends UI5Element { /** * Defines the action design. * - * @type {sap.ui.webc.main.types.ButtonDesign} - * @defaultvalue "Transparent" + * @default "Transparent" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.design */ @property({ type: ButtonDesign, defaultValue: ButtonDesign.Transparent }) design!: `${ButtonDesign}`; @@ -80,10 +68,8 @@ class NotificationAction extends UI5Element { * SAP-icons font provides numerous built-in icons. To find all the available icons, see the * Icon Explorer. * - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.icon */ @property() icon!: string; @@ -92,9 +78,9 @@ class NotificationAction extends UI5Element { * Fires a custom event "click". * Note: Called by NotificationListItem and NotificationListGroupItem components. * - * @param { MouseEvent } e + * @param e * @protected - * @returns { boolean } false, if the event was cancelled (preventDefault called), true otherwise + * @returns false, if the event was cancelled (preventDefault called), true otherwise */ fireClickEvent(e: MouseEvent): boolean { return this.fireEvent("click", { diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 09beb3c9bd42..51372bf7ae44 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -9,7 +9,7 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; import Popover from "@ui5/webcomponents/dist/Popover.js"; import NotificationListItemBase from "./NotificationListItemBase.js"; -import type NotificationListItem from "./NotificationListItem.js"; +import type { NotificationListItemBaseCloseEventDetail as NotificationListGroupItemCloseEventDetail } from "./NotificationListItemBase.js"; // Icons import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; @@ -37,8 +37,6 @@ import NotificationListGroupItemTemplate from "./generated/templates/Notificatio // Styles import NotificationListGroupItemCss from "./generated/themes/NotificationListGroupItem.css.js"; -import type { NotificationListItemBaseCloseEventDetail as NotificationListGroupItemCloseEventDetail } from "./NotificationListItemBase.js"; - type NotificationListGroupItemToggleEventDetail = { item: NotificationListGroupItem, }; @@ -63,28 +61,14 @@ type NotificationListGroupItemToggleEventDetail = { *

    Usage

    * The component can be used in a standard ui5-list. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-li-notification-group exposes the following CSS Shadow Parts: - *
      - *
    • title-text - Used to style the titleText of the notification list group item
      • - *
    - * *

    ES6 Module Import

    * * import "@ui5/webcomponents/dist/NotificationListGroupItem.js"; *
    * import "@ui5/webcomponents/dist/NotificationAction.js"; (optional) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListGroupItem - * @extends sap.ui.webc.fiori.NotificationListItemBase - * @tagname ui5-li-notification-group + * @extends NotificationListItemBase * @since 1.0.0-rc.8 - * @appenddocs sap.ui.webc.fiori.NotificationAction - * @implements sap.ui.webc.main.IListItem * @public */ @customElement({ @@ -105,15 +89,12 @@ type NotificationListGroupItemToggleEventDetail = { * Fired when the ui5-li-notification-group is expanded/collapsed by user interaction. * * @public - * @event sap.ui.webc.fiori.NotificationListGroupItem#toggle */ @event("toggle") class NotificationListGroupItem extends NotificationListItemBase { /** * Defines if the group is collapsed or expanded. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.collapsed + * @default false * @public */ @property({ type: Boolean }) @@ -121,9 +102,7 @@ class NotificationListGroupItem extends NotificationListItemBase { /** * Defines if the items counter would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.showCounter + * @default false * @public */ @property({ type: Boolean }) @@ -133,13 +112,10 @@ class NotificationListGroupItem extends NotificationListItemBase { * Defines the items of the ui5-li-notification-group, * usually ui5-li-notification items. * - * @type {sap.ui.webc.fiori.INotificationListItem[]} - * @slot items - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.default * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array + items!: Array onBeforeRendering() { if (this.busy) { diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index bf33877d5a6d..e34abfc07766 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -69,29 +69,16 @@ type Footnote = Record; *

    Usage

    * The component can be used in a standard ui5-list. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-li-notification exposes the following CSS Shadow Parts: - *
      - *
    • title-text - Used to style the titleText of the notification list item
      • - *
    - * *

    ES6 Module Import

    * * import "@ui5/webcomponents/dist/NotificationListItem.js"; *
    * import "@ui5/webcomponents/dist/NotificationAction.js"; (optional) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListItem - * @extends sap.ui.webc.fiori.NotificationListItemBase - * @tagname ui5-li-notification - * @appenddocs sap.ui.webc.fiori.NotificationAction + * @extends NotificationListItemBase * @since 1.0.0-rc.8 - * @implements sap.ui.webc.fiori.INotificationListItem, sap.ui.webc.main.IListItem * @public + * @csspart title-text - Used to style the titleText of the notification list item */ @customElement({ tag: "ui5-li-notification", @@ -116,10 +103,8 @@ class NotificationListItem extends NotificationListItemBase { *

    * Note: by default the titleText and description, * and a ShowMore/Less button would be displayed. - * @type {sap.ui.webc.main.types.WrappingType} - * @defaultvalue "None" + * @default "None" * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.wrappingType * @since 1.0.0-rc.15 */ @property({ type: WrappingType, defaultValue: WrappingType.None }) @@ -150,20 +135,14 @@ class NotificationListItem extends NotificationListItemBase { * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the ui5-avatar * you can set its size property to XS to get the required size - <ui5-avatar size="XS"></ui5-avatar>. * - * @type {sap.ui.webc.main.IAvatar} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.avatar */ @slot() avatar!: Array; /** * Defines the elements, displayed in the footer of the of the component. - * @type {HTMLElement[]} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.footnotes */ @slot({ type: HTMLElement, individualSlots: true }) footnotes!: Array; @@ -175,10 +154,7 @@ class NotificationListItem extends NotificationListItemBase { *

    * Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. * - * @type {Node[]} - * @slot description * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.default */ @slot({ type: Node, "default": true }) description!: Array; diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts index 7b9efe14d67f..04fd55161e90 100644 --- a/packages/fiori/src/NotificationListItemBase.ts +++ b/packages/fiori/src/NotificationListItemBase.ts @@ -44,38 +44,35 @@ type NotificationListItemBaseCloseEventDetail = { * * The base class of the NotificationListItem and NotificationListGroupItem. * - * @abstract * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListItemBase - * @extends sap.ui.webc.main.ListItemBase + * @extends ListItemBase * @since 1.0.0-rc.8 * @public */ +@customElement({ + staticAreaStyles: NotificationOverflowActionsPopoverCss, + staticAreaTemplate: NotificationOverflowActionsPopoverTemplate, +}) /** * Fired when the Close button is pressed. * - * @event sap.ui.webc.fiori.NotificationListItemBase#close * @param {HTMLElement} item the closed item. * @public */ @event("close", { detail: { + /** + * @public + */ item: HTMLElement, }, }) -@customElement({ - staticAreaStyles: NotificationOverflowActionsPopoverCss, - staticAreaTemplate: NotificationOverflowActionsPopoverTemplate, -}) class NotificationListItemBase extends ListItemBase { /** * Defines the titleText of the item. - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.titleText */ @property() titleText!: string; @@ -83,20 +80,16 @@ class NotificationListItemBase extends ListItemBase { /** * Defines the priority of the item. * - * @type {sap.ui.webc.main.types.Priority} - * @defaultvalue "None" + * @default "None" * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.priority */ @property({ type: Priority, defaultValue: Priority.None }) priority!: `${Priority}`; /** * Defines if the close button would be displayed. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.showClose */ @property({ type: Boolean }) showClose!: boolean; @@ -106,20 +99,16 @@ class NotificationListItemBase extends ListItemBase { *

    * Note: if set to false the titleText has bold font, * if set to true - it has a normal font. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.read */ @property({ type: Boolean }) read!: boolean; /** * Defines if a busy indicator would be displayed over the item. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.busy * @since 1.0.0-rc.8 */ @property({ type: Boolean }) @@ -128,10 +117,8 @@ class NotificationListItemBase extends ListItemBase { /** * Defines the delay in milliseconds, after which the busy indicator will show up for this component. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultValue 1000 + * @default 1000 * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.busyDelay */ @property({ validator: Integer, defaultValue: 1000 }) busyDelay!: number; @@ -141,10 +128,7 @@ class NotificationListItemBase extends ListItemBase { *

    * Note: use the ui5-notification-action component. * - * @type {sap.ui.webc.fiori.INotificationAction[]} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.actions */ @slot() actions!: Array diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts index 84d3f49031c2..3379cd13202a 100644 --- a/packages/fiori/src/Page.ts +++ b/packages/fiori/src/Page.ts @@ -36,26 +36,15 @@ import PageCss from "./generated/themes/Page.css.js"; * that there is enough space for the ui5-page to be rendered. * Note: In order for the ui5-page to be displayed, the parent element should have fixed height. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-page exposes the following CSS Shadow Parts: - *
      - *
    • content - Used to style the content section of the component
      • - *
    - * *

    ES6 Module Import

    * * import "@ui5/webcomponents-fiori/dist/Page.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.Page - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-page + * @extends UI5Element * @since 1.0.0-rc.12 * @public + * @csspart content - Used to style the content section of the component */ @customElement({ tag: "ui5-page", @@ -74,9 +63,7 @@ class Page extends UI5Element { * Note: When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast. *

    * - * @type {sap.ui.webc.fiori.types.PageBackgroundDesign} - * @name sap.ui.webc.fiori.Page.prototype.backgroundDesign - * @defaultvalue "Solid" + * @default "Solid" * @public */ @property({ type: PageBackgroundDesign, defaultValue: PageBackgroundDesign.Solid }) @@ -86,9 +73,7 @@ class Page extends UI5Element { * Disables vertical scrolling of page content. * If set to true, there will be no vertical scrolling at all. * - * @type {boolean} - * @name sap.ui.webc.fiori.Page.prototype.disableScrolling - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -98,9 +83,8 @@ class Page extends UI5Element { * Defines if the footer should float over the content. *

    * Note: When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page. - * @type {boolean} - * @name sap.ui.webc.fiori.Page.prototype.floatingFooter - * @defaultvalue true + * + * @default true * @public */ @property({ type: Boolean }) @@ -109,9 +93,7 @@ class Page extends UI5Element { /** * Defines the footer visibility. * - * @type {boolean} - * @name sap.ui.webc.fiori.Page.prototype.hideFooter - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -120,7 +102,6 @@ class Page extends UI5Element { /** * Defines the current media query size. * - * @type {string} * @private * @since 1.0.0-rc.15 */ @@ -130,9 +111,6 @@ class Page extends UI5Element { /** * Defines the header HTML Element. * - * @type {sap.ui.webc.fiori.IBar} - * @name sap.ui.webc.fiori.Page.prototype.header - * @slot * @public */ @slot() @@ -141,9 +119,6 @@ class Page extends UI5Element { /** * Defines the content HTML Element. * - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Page.prototype.default - * @slot content * @public */ @slot({ type: HTMLElement, "default": true }) @@ -152,9 +127,6 @@ class Page extends UI5Element { /** * Defines the footer HTML Element. * - * @type {sap.ui.webc.fiori.IBar} - * @name sap.ui.webc.fiori.Page.prototype.footer - * @slot * @public */ @slot() diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index d4f1e072da74..76953535a084 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -23,7 +23,7 @@ import { // Styles import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js"; -import type ProductSwitchItem from "./ProductSwitchItem.js"; +import type IProductSwitchItem from "./ProductSwitchItem.js"; /** * @class @@ -51,11 +51,7 @@ import type ProductSwitchItem from "./ProductSwitchItem.js"; *
    * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; (for ui5-product-switch-item) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ProductSwitch - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-product-switch - * @appenddocs sap.ui.webc.fiori.ProductSwitchItem + * @extends UI5Element * @public * @since 1.0.0-rc.5 */ @@ -90,13 +86,10 @@ class ProductSwitch extends UI5Element { /** * Defines the items of the ui5-product-switch. * - * @type {sap.ui.webc.fiori.IProductSwitchItem[]} - * @name sap.ui.webc.fiori.ProductSwitch.prototype.default - * @slot items * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array + items!: Array _itemNavigation: ItemNavigation; _currentIndex: number; @@ -146,11 +139,11 @@ class ProductSwitch extends UI5Element { handleProductSwitchItemClick(e: MouseEvent) { this.items.forEach(item => { item.selected = false; }); - (e.target as ProductSwitchItem).selected = true; + (e.target as IProductSwitchItem).selected = true; } _onfocusin(e: FocusEvent) { - const target = e.target as ProductSwitchItem; + const target = e.target as IProductSwitchItem; this._itemNavigation.setCurrentItem(target); this._currentIndex = this.items.indexOf(target); diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index d67511ba0e76..efcd052e22de 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; -import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; @@ -10,6 +9,7 @@ import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTe // Styles import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; +import type { IProductSwitchItem } from "./Interfaces.js"; /** * @class @@ -33,12 +33,9 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ProductSwitchItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-product-switch-item + * @extends UI5Element * @public - * @implements sap.ui.webc.fiori.IProductSwitchItem + * @implements {IProductSwitchItem} * @since 1.0.0-rc.5 */ @customElement({ @@ -52,12 +49,11 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; * Fired when the ui5-product-switch-item is activated either with a * click/tap or by using the Enter or Space key. * - * @event sap.ui.webc.fiori.ProductSwitchItem#click * @public */ @event("click") @event("_focused") -class ProductSwitchItem extends UI5Element implements ITabbable { +class ProductSwitchItem extends UI5Element implements IProductSwitchItem { constructor() { super(); @@ -70,9 +66,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the title of the component. - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.titleText - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.15 * @public */ @@ -81,9 +75,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the subtitle of the component. - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.subtitleText - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.15 * @public */ @@ -99,9 +91,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { * * See all the available icons in the Icon Explorer. * - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -118,9 +108,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { *
  • _parent
    • *
  • _search
    • * - * - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target + * @default "_self" * @public */ @property({ defaultValue: "_self" }) @@ -128,9 +116,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the component target URI. Supports standard hyperlink behavior. - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.targetSrc - * @defaultvalue "" + * @default "" * @public */ @property() diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 97bd0defd60a..845dbfd5807a 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -17,6 +17,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega import Popover from "@ui5/webcomponents/dist/Popover.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import type Input from "@ui5/webcomponents/dist/Input.js"; +import type { IButton } from "@ui5/webcomponents/dist/Interfaces.js"; import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -25,6 +26,7 @@ import "@ui5/webcomponents-icons/dist/bell.js"; import "@ui5/webcomponents-icons/dist/overflow.js"; import "@ui5/webcomponents-icons/dist/grid.js"; import type { Timeout, ClassMap } from "@ui5/webcomponents-base/dist/types.js"; +import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import type ShellBarItem from "./ShellBarItem.js"; // Templates @@ -139,15 +141,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms *
  • product-switch
    • * * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-shellbar exposes the following CSS Shadow Parts: - *
      - *
    • root - Used to style the outermost wrapper of the ui5-shellbar
      • - *
    - * *

    Keyboard Handling

    * *

    Fast Navigation

    @@ -159,12 +152,10 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms *

    ES6 Module Import

    * import "@ui5/webcomponents-fiori/dist/ShellBar"; * + * @csspart root - Used to style the outermost wrapper of the ui5-shellbar + * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ShellBar - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-shellbar - * @appenddocs sap.ui.webc.fiori.ShellBarItem + * @extends UI5Element * @public * @since 0.8.0 */ @@ -189,13 +180,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * * Fired, when the notification icon is activated. * - * @event sap.ui.webc.fiori.ShellBar#notifications-click * @allowPreventDefault * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("notifications-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -203,12 +196,14 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the profile slot is present. * - * @event sap.ui.webc.fiori.ShellBar#profile-click * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("profile-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -217,13 +212,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * Fired, when the product switch icon is activated. * Note: You can prevent closing of overflow popover by calling event.preventDefault(). * - * @event sap.ui.webc.fiori.ShellBar#product-switch-click * @allowPreventDefault * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("product-switch-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -231,13 +228,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the logo is activated. * - * @event sap.ui.webc.fiori.ShellBar#logo-click * @param {HTMLElement} targetRef dom ref of the activated element * @since 0.10 * @public */ @event("logo-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -245,13 +244,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the co pilot is activated. * - * @event sap.ui.webc.fiori.ShellBar#co-pilot-click * @param {HTMLElement} targetRef dom ref of the activated element * @since 0.10 * @public */ @event("co-pilot-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -260,13 +261,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * Fired, when a menu item is activated * Note: You can prevent closing of overflow popover by calling event.preventDefault(). * - * @event sap.ui.webc.fiori.ShellBar#menu-item-click * @param {HTMLElement} item DOM ref of the activated list item * @since 0.10 * @public */ @event("menu-item-click", { detail: { + /** + * @public + */ item: { type: HTMLElement }, }, }) @@ -276,9 +279,7 @@ class ShellBar extends UI5Element { * Defines the primaryTitle. *

    * Note: The primaryTitle would be hidden on S screen size (less than approx. 700px). - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.primaryTitle + * @default "" * @public */ @property() @@ -288,9 +289,7 @@ class ShellBar extends UI5Element { * Defines the secondaryTitle. *

    * Note: The secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px). - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.secondaryTitle + * @default "" * @public */ @property() @@ -299,9 +298,7 @@ class ShellBar extends UI5Element { /** * Defines the notificationsCount, * displayed in the notification icon top-right corner. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsCount + * @default "" * @public */ @property() @@ -309,9 +306,7 @@ class ShellBar extends UI5Element { /** * Defines, if the notification icon would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showNotifications + * @default false * @public */ @property({ type: Boolean }) @@ -319,9 +314,7 @@ class ShellBar extends UI5Element { /** * Defines, if the product switch icon would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showProductSwitch + * @default false * @public */ @property({ type: Boolean }) @@ -331,9 +324,7 @@ class ShellBar extends UI5Element { * Defines, if the product CoPilot icon would be displayed. *
    Note: By default the co-pilot is displayed as static SVG. * If you need an animated co-pilot, you can import the "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js" module as add-on feature. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showCoPilot + * @default false * @public */ @property({ type: Boolean }) @@ -342,9 +333,7 @@ class ShellBar extends UI5Element { /** * Defines, if the Search Field would be displayed when there is a valid searchField slot. *
    Note: By default the Search Field is not displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showSearchField + * @default false * @public */ @property({ type: Boolean }) @@ -355,9 +344,7 @@ class ShellBar extends UI5Element { * * It supports the following fields: * - logoRole: the accessibility role for the logo - * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityRoles + * @default {} * @public * @since 1.6.0 */ @@ -372,8 +359,7 @@ class ShellBar extends UI5Element { * - profileButtonTitle: defines the tooltip for the profile button * - logoTitle: defines the tooltip for the logo * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityTexts + * @default {} * @public * @since 1.1.0 */ @@ -403,8 +389,7 @@ class ShellBar extends UI5Element { * * * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityAttributes + * @default {} * @public * @since 1.10.0 */ @@ -450,9 +435,6 @@ class ShellBar extends UI5Element { * Note: * You can use the  <ui5-shellbar-item></ui5-shellbar-item>. * - * @type {sap.ui.webc.fiori.IShellBarItem[]} - * @name sap.ui.webc.fiori.ShellBar.prototype.default - * @slot items * @public */ @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true }) @@ -464,9 +446,6 @@ class ShellBar extends UI5Element { * * Note: We recommend not using the size attribute of ui5-avatar because * it should have specific size by design in the context of ui5-shellbar profile. - * @type {sap.ui.webc.main.IAvatar} - * @name sap.ui.webc.fiori.ShellBar.prototype.profile - * @slot profile * @since 1.0.0-rc.6 * @public */ @@ -476,9 +455,6 @@ class ShellBar extends UI5Element { /** * Defines the logo of the ui5-shellbar. * For example, you can use ui5-avatar or img elements as logo. - * @type {sap.ui.webc.main.IAvatar} - * @name sap.ui.webc.fiori.ShellBar.prototype.logo - * @slot * @since 1.0.0-rc.8 * @public */ @@ -491,21 +467,15 @@ class ShellBar extends UI5Element { * Note: * You can use the  <ui5-li></ui5-li> and its ancestors. * - * @type {sap.ui.webc.main.IListItem[]} - * @name sap.ui.webc.fiori.ShellBar.prototype.menuItems - * @slot * @since 0.10 * @public */ @slot() - menuItems!: Array; + menuItems!: Array; /** * Defines the ui5-input, that will be used as a search field. * - * @type {sap.ui.webc.main.IInput} - * @name sap.ui.webc.fiori.ShellBar.prototype.searchField - * @slot * @public */ @slot() @@ -516,13 +486,10 @@ class ShellBar extends UI5Element { * We encourage this slot to be used for a back or home button. * It gets overstyled to match ShellBar's styling. * - * @type {sap.ui.webc.main.IButton} - * @name sap.ui.webc.fiori.ShellBar.prototype.startButton - * @slot * @public */ @slot() - startButton!: Array