`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress("F6");
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 1st group is focused agian
+ cy.get("#first")
+ .should("be.focused");
+ });
+
+ it("tests navigation with nesting inside empty fastnav-group parent", () => {
+ cy.mount(html`
+
+
+
+
+ First focusable
+
+
+
+ Something focusable
+
+
+
+ First focusable
+
+
+
+ Something focusable
+
+
+ Second focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress("F6");
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.get("#second").realPress("F6");
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 1st group is focused agian
+ cy.get("#first")
+ .should("be.focused");
+ });
+
+ it("tests navigation with group as a focusable element", () => {
+ cy.mount(html`
+
+
+
+ First focusable
+
+
+ Something focusable
+
+
+ Second focusable
+
+
+ Something focusable
+
+
+ Third focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress("F6");
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.get("#first").realPress("F6");
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert 1st group is focused agian
+ cy.get("#first")
+ .should("be.focused");
+ });
+
+ it("tests navigation without a focusable element", () => {
+ cy.mount(html`
+ Before element
+
+
+ Group without focusable element
+
+
+ Something focusable
+
+
+ Group without focusable element
+
+
+ Something focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#first")
+ .realClick();
+
+ // assert clicked btn is also the focused element
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress("F6");
+
+ // assert same button remains focused as there is no fasnav group with focusable elements
+ cy.get("#first")
+ .should("be.focused");
+ });
+
+ it("tests navigation with a single group", () => {
+ cy.mount(html`
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 3rd group is focused agian
+ cy.get("#third")
+ .should("be.focused");
+ });
+
+ it("tests navigation with nesting inside empty fastnav-group parent", () => {
+ cy.mount(html`
+
+
+
+
+ First focusable
+
+
+
+ Something focusable
+
+
+
+ First focusable
+
+
+
+ Something focusable
+
+
+ Second focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 1st group is focused agian
+ cy.get("#third")
+ .should("be.focused");
+ });
+
+ it("tests navigation with group as a focusable element", () => {
+ cy.mount(html`
+
+
+
+ First focusable
+
+
+ Something focusable
+
+
+ Second focusable
+
+
+ Something focusable
+
+
+ Third focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 3rd group is focused
+ cy.get("#third")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 2nd group is focused (an empty group is skipped)
+ cy.get("#second")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 3rd group is focused agian
+ cy.get("#third")
+ .should("be.focused");
+ });
+
+ it("tests navigation without a focusable element", () => {
+ cy.mount(html`
+ Before element
+
+
+ Group without focusable element
+
+
+ Something focusable
+
+
+ Group without focusable element
+
+
+ Something focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#first")
+ .realClick();
+
+ // assert clicked btn is also the focused element
+ cy.get("#first")
+ .should("be.focused");
+
+ // act
+ cy.realPress(["Shift", "F6"]);
+
+ // assert same button remains focused as there is no fasnav group with focusable elements
+ cy.get("#first")
+ .should("be.focused");
+ });
+
+ it("tests navigation with a single group", () => {
+ cy.mount(html`
+
+
+
+ Before element
+
+
+ Something focusable
+
+
+ Something focusable
+
+
+ After Element
+
`);
+
+ // act
+ cy.get("#before").focus();
+ cy.realPress(["Shift", "F6"]);
+
+ // assert 1st group is focused
+ cy.get("#first")
+ .should("be.focused");
+ });
+ });
+});
diff --git a/packages/main/test/specs/F6Test.spec.js b/packages/main/test/specs/F6Test.spec.js
deleted file mode 100644
index e01292f79a75..000000000000
--- a/packages/main/test/specs/F6Test.spec.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import { assert } from "chai";
-
-describe("F6 Test", () => {
- describe("Forward", () => {
- it("Basic", async () => {
- await browser.url(`test/pages/F6Test1.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Basic with an empty group", async () => {
- await browser.url(`test/pages/F6Test2.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Nested groups", async () => {
- await browser.url(`test/pages/F6Test3.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Nested inside empty fastnav-group parent", async () => {
- await browser.url(`test/pages/F6Test4.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct ");
- });
-
- it("Basic with group as focusable element", async () => {
- await browser.url(`test/pages/F6Test5.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Groups without focusable element", async () => {
- await browser.url(`test/pages/F6Test6.html`);
-
- const button = await browser.$("#first");
-
- await button.click();
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("One group", async () => {
- await browser.url(`test/pages/F6Test7.html`);
-
- // Go to next group
- await browser.keys("F6");
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
- })
-
- describe("Backward", () => {
- it("Basic", async () => {
- await browser.url(`test/pages/F6Test1.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Basic with an empty group", async () => {
- await browser.url(`test/pages/F6Test2.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Nested groups", async () => {
- await browser.url(`test/pages/F6Test3.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Nested inside empty fastnav-group parent", async () => {
- await browser.url(`test/pages/F6Test4.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct ");
- });
-
- it("Basic with group as focusable element", async () => {
- await browser.url(`test/pages/F6Test5.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("second", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to first group (circle)
- await browser.keys(["Shift", "F6"]);
- assert.equal("third", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("Groups without focusable element", async () => {
- await browser.url(`test/pages/F6Test6.html`);
-
- const button = await browser.$("#first");
-
- await button.click();
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
-
- it("One group", async () => {
- await browser.url(`test/pages/F6Test7.html`);
-
- // Go to next group
- await browser.keys(["Shift", "F6"]);
- assert.equal("first", await browser.$(await browser.getActiveElement()).getAttribute("id"), "correct focus");
- });
- })
-});
From daa3399654b81fb51259129e493708b06b6ee8ff Mon Sep 17 00:00:00 2001
From: ilhan orhan
Date: Tue, 10 Sep 2024 11:27:35 +0300
Subject: [PATCH 008/114] fix(ui5-table): add aria reference to growing btn sub
text (#9836)
The moreDataText has never been assigned, probably a degradation in the past after growingButtonSubText was introduced. Due to this even if growingButtonSubText is set, the span ({this._id}-growingButton-subtext) that is internally created for a11y reasons has never been referenced and read out by screen readers.
Related to: #9807
---
packages/compat/src/Table.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts
index 36e95c6eb288..2620f2f6fd51 100644
--- a/packages/compat/src/Table.ts
+++ b/packages/compat/src/Table.ts
@@ -440,7 +440,6 @@ class Table extends UI5Element {
fnOnRowFocused: (e: CustomEvent) => void;
_handleResize: ResizeObserverCallback;
- moreDataText?: string;
tableEndObserved: boolean;
visibleColumns: Array;
visibleColumnsCount?: number;
@@ -1161,7 +1160,7 @@ class Table extends UI5Element {
}
get loadMoreAriaLabelledBy(): string {
- if (this.moreDataText) {
+ if (this.growingButtonSubtext) {
return `${this._id}-growingButton-text ${this._id}-growingButton-subtext`;
}
From 1ebf7db3faa8a2be1d35347407a365f5cf3004de Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:06:39 +0300
Subject: [PATCH 009/114] fix(f6 navigation): work properly when multiple
runtimes (#9810)
F6 navigation adds `keydown` handler to the body element that will move the focus to the previous / next group that has focusable element. If F6 navigation feature is enabled in multiple runtimes this handler will be attach multiple times.
With current change, we ensure that only one callback will be executed to move the focus to the correct element. This callback is coming from the latest registered runtime (newest version).
Fixes: https://github.com/SAP/ui5-webcomponents/issues/9795
---
packages/base/src/features/F6Navigation.ts | 39 +++++++++++++++++-----
1 file changed, 30 insertions(+), 9 deletions(-)
diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts
index a8f0e819d0b2..a67b65eb95c2 100644
--- a/packages/base/src/features/F6Navigation.ts
+++ b/packages/base/src/features/F6Navigation.ts
@@ -4,9 +4,23 @@ import { instanceOfUI5Element } from "../UI5Element.js";
import { getFirstFocusableElement } from "../util/FocusableElements.js";
import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
import isElementClickable from "../util/isElementClickable.js";
+import { getCurrentRuntimeIndex, compareRuntimes } from "../Runtimes.js";
+import getSharedResource from "../getSharedResource.js";
+
+type F6Registry = {
+ instance?: F6Navigation,
+}
+
+const currentRuntimeINdex = getCurrentRuntimeIndex();
+
+const shouldUpdate = (runtimeIndex: number | undefined) => {
+ if (runtimeIndex === undefined) {
+ return true;
+ }
+ return compareRuntimes(currentRuntimeINdex, runtimeIndex) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer
+};
class F6Navigation {
- static _instance: F6Navigation;
keydownHandler: (event: KeyboardEvent) => void;
selectedGroup: HTMLElement | null = null;
groups: Array = [];
@@ -20,6 +34,10 @@ class F6Navigation {
document.addEventListener("keydown", this.keydownHandler);
}
+ removeEventListeners() {
+ document.removeEventListener("keydown", this.keydownHandler);
+ }
+
async groupElementToFocus(nextElement: HTMLElement) {
const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
@@ -149,10 +167,6 @@ class F6Navigation {
elementToFocus?.focus();
}
- removeEventListeners() {
- document.removeEventListener("keydown", this.keydownHandler);
- }
-
updateGroups() {
this.setSelectedGroup();
this.groups = getFastNavigationGroups(document.body);
@@ -181,12 +195,19 @@ class F6Navigation {
this.removeEventListeners();
}
+ get _ui5RuntimeIndex() {
+ return currentRuntimeINdex;
+ }
+
static init() {
- if (!this._instance) {
- this._instance = new F6Navigation();
- }
+ const f6Registry = getSharedResource("F6Registry", {});
- return this._instance;
+ if (!f6Registry.instance) {
+ f6Registry.instance = new F6Navigation();
+ } else if (shouldUpdate(f6Registry.instance?._ui5RuntimeIndex)) {
+ f6Registry.instance?.destroy();
+ f6Registry.instance = new F6Navigation();
+ }
}
}
From 5ba5c9b0291240d46c0bcb5182fd0d6c34b7db8a Mon Sep 17 00:00:00 2001
From: ilhan orhan
Date: Tue, 10 Sep 2024 14:48:10 +0300
Subject: [PATCH 010/114] docs: enhance deep dive section (#9816)
Related to: #9190
---
docs/2-advanced/11-styles.md | 2 +-
docs/3-frameworks/03-Vue.md | 20 +-
docs/4-development/04-slots.md | 50 +-
.../11-deep-dive-and-best-practices.md | 495 +++++++++++++++++-
4 files changed, 525 insertions(+), 42 deletions(-)
diff --git a/docs/2-advanced/11-styles.md b/docs/2-advanced/11-styles.md
index 8f10e5ec5b31..dbfe5ec24af6 100644
--- a/docs/2-advanced/11-styles.md
+++ b/docs/2-advanced/11-styles.md
@@ -17,7 +17,7 @@ We designed some components such as Title, Label, Tag, Button, Input, and a few
background: purple;
}
```
-You can try this yourself on the Input [test page](https://sap.github.io/ui5-webcomponents/main/playground/main/pages/Input/).
+You can try this yourself using the Input [sample](https://sap.github.io/ui5-webcomponents/components/Input/#custom-styling/).
Unfortunately, this can't be done for all components because it depends on the complexity of the DOM structure.
diff --git a/docs/3-frameworks/03-Vue.md b/docs/3-frameworks/03-Vue.md
index 0287c4cf5b4e..31daa04d8eee 100644
--- a/docs/3-frameworks/03-Vue.md
+++ b/docs/3-frameworks/03-Vue.md
@@ -3,7 +3,6 @@
In this tutorial you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new Vue.js applications and to already existing ones.
## Setting up a Vite and Vue.js project with UI5 Web Components
-
### Step 1. Setup a Vue project with Vite.
@@ -55,15 +54,20 @@ import "@ui5/webcomponents/dist/Button.js";
```bash
npm run dev
```
-## Additional Info
-### Two-Way Data Binding
-`v-model` binding doesn't work for custom elements. In order to use two-way data binding, you need to bind and update the value yourself like this:
+## Two-Way Data Binding
+
+In order to use two-way data binding, use `v-model` as follows:
+
+```html
+
+```
+
+For the `CheckBox` and `RadioButton` web components, you need to include an additional `type` attribute. This informs the Vue compiler that these components use the `checked` property (unlike most input-type components that use the `value` property).
```html
-
-
+
+
```
+
diff --git a/docs/4-development/04-slots.md b/docs/4-development/04-slots.md
index 8d20f172e2ba..b43267a7f2eb 100644
--- a/docs/4-development/04-slots.md
+++ b/docs/4-development/04-slots.md
@@ -8,14 +8,26 @@ Currently, there are two types of slots: "named" and "unnamed". The difference b
## Unnamed slots
-Use unnamed slots when your component does not need to know if any children have been passed to a certain slot, or generally interact with its children from the said slot.
-
-To define an unnamed slot, you simply add a `` element inside your `.hbs` template, for example:
+Use unnamed slots when your component doesn't need to be aware of or interact with the children passed to a specific slot.
+To define an unnamed slot, simply add a `` element within your `.hbs` template. For example:
```hbs
-
+{{!-- MyDemoComponent.hbs --}}
+
+
+
```
+On the consuming side, elements can be passed to this slot using the `slot` attribute:
+
+```html
+
+
+ Hello World
+
+```
+
+
**Note:** It is recommended to describe your unnamed slots inside a JSDoc comment that describes your class using the `@slot` tag, following the pattern `@slot {type} name - description`.
## Named slots and the `@slot` decorator
@@ -39,15 +51,15 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@customElement("my-demo-component")
class MyDemoComponent extends UI5Element {
- @slot({ type: HTMLElement })
+ @slot()
mySlot!: Array;
}
```
You can see the available options below.
-### type
-This option is required and accepts a type constructor (e.g., `HTMLElement`, `Node`) and is used to define the type of children that can be slotted inside the slot.
+### Type
+The `type` option accepts a type constructor (e.g., `HTMLElement`, `Node`) and is used to define the type of children that can be slotted inside the slot.
```ts
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -67,10 +79,14 @@ Available types:
| HTMLElement | Accepts HTML Elements only |
| Node | Accepts both Text nodes and HTML Elements |
+**Note**: If the slot configuration object is not provided (e.g. `@slot()`), `HTMLElement` will be used as the default type.
+
+
### Default Slot
-This option accepts a boolean value and is used to define whether this slot is the default one.
-**Note:** The default slot is defined simply as an empty slot tag: `` (without a `name` attribute).
+The `"default"` option accepts a boolean value and is used to define whether this slot is the default one.
+
+**Note:** The default slot is defined simply as an empty slot tag `` (without a `name` attribute) in the component's template.
```ts
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -79,13 +95,14 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@customElement("my-demo-component")
class MyDemoComponent extends UI5Element {
- @slot({ type: HTMLElement, default: true })
+ @slot({ type: HTMLElement, "default": true })
mySlot!: Array;
}
```
-### `individualSlots`
-This option accepts a boolean value and determines whether each child will have its own slot, allowing you to arrange or wrap the children arbitrarily. This means that you need to handle the rendering on your own.
+### Individual Slots
+
+The `individualSlots` option accepts a boolean value and determines whether each child will have its own slot, allowing you to arrange or wrap the children arbitrarily. This means that you need to handle the rendering on your own.
```ts
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -99,7 +116,7 @@ class MyDemoComponent extends UI5Element {
}
```
-To render individual slots, you have to iterate all children in that slot and use the `_individualSlot` property that the framework sets automatically set on each child:
+To render individual slots, you have to iterate all children in that slot and use the `_individualSlot` property that the framework sets automatically on each child:
```hbs
{{#each mySlot}}
@@ -109,12 +126,11 @@ To render individual slots, you have to iterate all children in that slot and us
**Note:** When this option is set to `true`, the `_individualSlot` property is set to each direct child, where `_individualSlot` returns a string following the pattern `{nameOfTheSlot}-{index}` and the slot attribute is changed based on that pattern.
-### `invalidateOnChildChange`
-This option accepts a boolean value or an object literal containing a configuration with more specific settings, determining whether the component should be invalidated on child change.
+### Invalidation upon child changes
-**NOTE: This is an experimental option and should not be used.**
+The `invalidateOnChildChange` option accepts a boolean value or an object literal containing a configuration with more specific settings, determining whether the component should be invalidated on child change.
-Important: `invalidateOnChildChange` is not meant to be used with standard DOM elements and is not to be confused with MutationObserver-like functionality. It targets the use case of components that slot abstract items (UI5Element instances without a template) and require invalidation whenever these items are invalidated.
+**Note**: `invalidateOnChildChange` is not meant to be used with standard DOM elements and is not to be confused with MutationObserver-like functionality. It targets the use case of components that slot UI5Element instances and require invalidation whenever these items are invalidated.
```ts
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
diff --git a/docs/4-development/11-deep-dive-and-best-practices.md b/docs/4-development/11-deep-dive-and-best-practices.md
index c19d141a126b..a278838b6435 100644
--- a/docs/4-development/11-deep-dive-and-best-practices.md
+++ b/docs/4-development/11-deep-dive-and-best-practices.md
@@ -100,10 +100,10 @@ or another type of selector (for example by ID):
The framework will create a getter/setter pair on your component's prototype for each property, defined with `@property` decorator.
-For example, defining text property:
+For example, defining `text` property:
```ts
-@property
+@property()
text = ""
```
@@ -118,9 +118,25 @@ Whenever `text` is read or set, the framework-defined getter/setter will be call
#### Properties vs attributes
-The `properties` section defines both properties and attributes for your component. By default, for each property (`camelCase` name) an attribute with the
+The `properties` defined via the `@property` decorator results in both properties and attributes for your component. By default, for each property (`camelCase` name) an attribute with the
same name but in `kebab-case` is supported. Properties of type `Object` have no attribute counterparts. If you wish to not have an attribute for a given property regardless of type, you can configure it with `noAttribute: true` setting.
+For example, defining `headerText` property:
+
+```ts
+@property()
+headerText = ""
+```
+
+you can use both the `headerText` property and `header-text` attribute:
+
+```ts
+let t = myComponent.text;
+myComponent.headerText = "New text";
+myComponent.setAttrbite("header-text", "New text");
+```
+
+
#### Public vs private properties
The framework does not distinguish between *public* and *private* properties. You can treat some properties as private in a sense that you can document them as such and not advertise them to users.
@@ -131,11 +147,9 @@ are *component state*, therefore cause the component to be invalidated and subse
The most common types of properties are `String`, `Boolean`, `Object`and `Number`.
-Most property types can have a default but `Boolean` should always `false` by default.
+Most property types can have a default value, but `Boolean `properties should always default to `false`. When a boolean attribute is absent, it's treated as false, therefore, the default value of an attribute must be always false.
-#### Examples
-
-Example of defining properties:
+For example, defining different types of properties:
```ts
class MyComponent extends UI5Element {
@@ -155,7 +169,7 @@ class MyComponent extends UI5Element {
* @private
*/
@property({ type: Boolean })
- _isPhone = {};
+ _isPhone = false;
}
```
@@ -163,12 +177,14 @@ Here `text`, `width`, `scale` and `data` are public properties, and `_isPhone` p
#### Best practices for using properties
-The best practice is to **never** change public properties from within the component (they are owned by the application) unless the property changes due to user interaction (f.e. the user typed in an input - so you change the `value` property; or the user clicked a checkbox - and you flip the `checked` property). It is also
-a best practice to always **fire an event** if you change a public property due to user interaction, to let the application know and synchronize its own state.
+- **Аvoid directly modifying public properties** from within a component, as these properties are typically controlled by the parent application. The only exception to this rule is when the property change results directly from user interaction (e.g., updating a value after a user types in an input field, or toggling a checked property after a user clicks a checkbox). Additionally, whenever you modify a public property due to user interaction, it's important to **fire an event** to notify the parent application. This ensures that the application can synchronize its state accordingly.
+
+- As for private properties, the best practice is to **only** change them internally and never let the application know about their existence.
+
+- Using attribute selectors instead of setting and using CSS classes on your component. Both public and private properties are great ways to create CSS selectors for your component with the `:host()` selector. The `:host()` selector targets the custom element itself, and can be combined with other selectors.
-As for private properties, the best practice is to **only** change them internally and never let the application know about their existence.
+For example, using the `size` property (respectively the attribute with the same name) to change component's dimensions for certain values - `size="XS"`:
-Both public and private properties are great ways to create CSS selectors for your component with the `:host()` selector. The `:host()` selector targets the custom element itself, and can be combined with other selectors:
```css
:host {
@@ -186,8 +202,6 @@ Both public and private properties are great ways to create CSS selectors for yo
```
-Here for example, if the `size` property (respectively the attribute with the same name) is set to `XS`, the component's dimensions will be changed from `5rem` to `2rem`.
-Using attribute selectors is the best practice as you don't have to set CSS classes on your component - you can write CSS selectors with `:host()` by attribute.
#### Metadata properties vs standard JS properties
@@ -205,6 +219,455 @@ However, only metadata-defined properties are managed by the framework: cause in
Feel free to create as many regular JS properties for the purpose of your component's functionality as you need, but bear in mind
that they will not be managed by the framework.
+
+## Events
+
+Most UI5 components emit events to inform the application about user interactions. Defining and firing events involves several key aspects:
+
+### Describing the Event
+
+Use the `@event` decorator to define the event. If the event name consists of multiple words, use kebab-case:
+
+```ts
+@event("selection-change", {
+ detail: {
+ valid: { type: Boolean },
+ },
+})
+class MyDemoComponent extends UI5Element {
+}
+```
+
+### Firing the Event
+
+Use the `UI5Element#fireEvent` method to trigger the event:
+
+```ts
+@event("selection-change", {
+ detail: {
+ valid: { type: Boolean },
+ },
+})
+class MyDemoComponent extends UI5Element {
+ onItemSelected(e: Event) {
+ this.fireEvent("selection-change", {
+ valid: true,
+ });
+ }
+}
+```
+
+### Describing the Event Detail
+
+When an event includes a detail it's recommended to create a TypeScript type that describes the event detail and use it in the `fireEvent` (as it's a generic method) to force static checks ensuring that proper event detail is passed.
+The naming convention for the type is a combination of the component class name ("MyDemoComponent"), the event name ("SelectionChange"), followed by "EventDetail", written in PascalCase, e.g "MyDemoComponentSelectionChangeEventDetail":
+
+
+```ts
+export type MyDemoComponentSelectionChangeEventDetail = {
+ valid: boolean;
+};
+
+
+@event("selection-change", {
+ detail: {
+ valid: { type: Boolean },
+ },
+})
+class MyDemoComponent extends UI5Element {
+
+ onItemSelected(e: Event) {
+ this.fireEvent("selection-change", {
+ valid: true,
+ });
+ }
+}
+```
+
+**Note:** it's a best practice to export the type to make it available for outside usage.
+
+
+### Handling Events in Templates
+
+ When attaching event handlers within your component's template for events fired by other web components, use the `ui5-` prefix for the event name.
+For example, if a ui5-list component emits a `selection-change` event, handle it using the `ui5-selection-change` event name:
+
+```handlebars
+
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
index 9a2b8900cce1..9a112ffa39c4 100644
--- a/packages/fiori/src/NotificationListGroupItem.ts
+++ b/packages/fiori/src/NotificationListGroupItem.ts
@@ -8,6 +8,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
import Button from "@ui5/webcomponents/dist/Button.js";
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type NotificationListGrowingMode from "@ui5/webcomponents/dist/types/NotificationListGrowingMode.js";
import NotificationListGroupList from "./NotificationListGroupList.js";
import NotificationListItemBase from "./NotificationListItemBase.js";
import type NotificationListItem from "./NotificationListItem.js";
@@ -89,6 +90,14 @@ type NotificationListGroupItemToggleEventDetail = {
*/
@event("toggle")
+/**
+ * Fired when additional items are requested.
+ *
+ * @public
+ * @since 2.2.0
+ */
+@event("load-more")
+
class NotificationListGroupItem extends NotificationListItemBase {
/**
* Defines if the group is collapsed or expanded.
@@ -98,6 +107,16 @@ class NotificationListGroupItem extends NotificationListItemBase {
@property({ type: Boolean })
collapsed = false;
+ /**
+ * Defines whether the component will have growing capability by pressing a `More` button.
+ * When button is pressed `load-more` event will be fired.
+ * @default false
+ * @public
+ * @since 2.2.0
+ */
+ @property()
+ growing: `${NotificationListGrowingMode}` = "None";
+
/**
* Defines the items of the `ui5-li-notification-group`,
* usually `ui5-li-notification` items.
@@ -190,6 +209,15 @@ class NotificationListGroupItem extends NotificationListItemBase {
this.toggleCollapsed();
}
+ _onLoadMore() {
+ this.fireEvent("load-more");
+ }
+
+ get loadMoreButton() {
+ const innerList = this.getDomRef()?.querySelector("[ui5-notification-group-list]") as NotificationListGroupList;
+ return innerList.getDomRef()?.querySelector("[growing-button-inner]") as HTMLElement;
+ }
+
async _onkeydown(e: KeyboardEvent) {
const isFocused = this.matches(":focus");
if (!isFocused) {
diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
index 5972a6812ac8..3485deb783e6 100644
--- a/packages/fiori/src/NotificationListItem.ts
+++ b/packages/fiori/src/NotificationListItem.ts
@@ -17,6 +17,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
import type Menu from "@ui5/webcomponents/dist/Menu.js";
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
import NotificationListItemImportance from "./types/NotificationListItemImportance.js";
import NotificationListItemBase from "./NotificationListItemBase.js";
import type NotificationList from "./NotificationList.js";
@@ -300,7 +301,7 @@ class NotificationListItem extends NotificationListItemBase {
}
get hasDesc() {
- return !!this.description.length;
+ return willShowContent(this.description);
}
get hasImportance() {
diff --git a/packages/fiori/src/themes/NotificationList.css b/packages/fiori/src/themes/NotificationList.css
index d6dbccfe15e0..7c2de8ff9fdf 100644
--- a/packages/fiori/src/themes/NotificationList.css
+++ b/packages/fiori/src/themes/NotificationList.css
@@ -1,3 +1,7 @@
:host(:not([hidden])) {
display: block;
+}
+
+[ui5-notification-list-internal] {
+ height: 100%;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
index 549b7201c142..3f5c2064a482 100644
--- a/packages/fiori/src/themes/NotificationListGroupItem.css
+++ b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -27,7 +27,9 @@
.ui5-nli-group-header {
height: 2.75rem;
- position: relative;
+ position: sticky;
+ top: 0;
+ z-index: 90; /* the z-index of the busy-indicator is 99 and the header shouldn't be over it */
background: var(--sapList_GroupHeaderBackground);
display: flex;
align-items: center;
@@ -79,3 +81,32 @@
:host([ui5-li-notification-group]) {
-webkit-tap-highlight-color: transparent;
}
+
+/* "More" button overrides follows */
+[ui5-notification-group-list]::part(growing-button) {
+ border: none;
+}
+
+[ui5-notification-group-list]::part(growing-button-inner) {
+ margin: var(--_ui5-notification_item-margin);
+ border: var(--_ui5-notification_item-border-top-left-right);
+ border-radius: var(--_ui5-notification_item-border-radius);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner) {
+ border-radius: var(--_ui5-notification_item-border-radius);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner):focus,
+[ui5-notification-group-list]::part(growing-button-inner):focus-visible {
+ outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);;
+ outline-offset: var(--_ui5-notification_item-outline-offset);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner):focus:active,
+[ui5-notification-group-list]::part(growing-button-inner):focus-visible:active {
+ background-color: var(--_ui5-notification_item-background-color-active);
+ border-radius: var(--_ui5-notification_item-border-radius);
+ border: var(--_ui5-notification_item-border-active);
+}
+
diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
index 55ad7aed037f..d62423f663a0 100644
--- a/packages/fiori/src/themes/base/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
@@ -18,6 +18,7 @@
--_ui5-notification_item-description-margin-top: 0.75rem;
--_ui5-notification_item-footer-margin-top: 0.75rem;
--_ui5-notification_item-focus-offset: 0;
+ --_ui5-notification_item-outline-offset: 0;
}
[data-ui5-compact-size],
diff --git a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
index 6ddf860508d8..190a152ea514 100644
--- a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
@@ -3,7 +3,7 @@
:root {
--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
--_ui5-notification_group_header-border-bottom-width: 0;
- --_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+ --_ui5-notification_group_header-margin: 0.75rem;
--_ui5-notification_group_header-padding: 0.5rem;
--_ui5-notification_item-state-icon-padding: 0.25rem;
--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
@@ -16,4 +16,5 @@
--_ui5-notification_item-content-padding: 0.75rem 0;
--_ui5-notification_item-title-margin-bottom: 0;
--_ui5-notification_item-focus-offset: 0.1875rem;
+ --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
index 6ddf860508d8..190a152ea514 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
@@ -3,7 +3,7 @@
:root {
--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
--_ui5-notification_group_header-border-bottom-width: 0;
- --_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+ --_ui5-notification_group_header-margin: 0.75rem;
--_ui5-notification_group_header-padding: 0.5rem;
--_ui5-notification_item-state-icon-padding: 0.25rem;
--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
@@ -16,4 +16,5 @@
--_ui5-notification_item-content-padding: 0.75rem 0;
--_ui5-notification_item-title-margin-bottom: 0;
--_ui5-notification_item-focus-offset: 0.1875rem;
+ --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
index 251e30ff77b3..abec6e1be6bd 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
@@ -3,7 +3,7 @@
:root {
--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
--_ui5-notification_group_header-border-bottom-width: 0;
- --_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+ --_ui5-notification_group_header-margin: 0.75rem;
--_ui5-notification_group_header-padding: 0.5rem;
--_ui5-notification_item-state-icon-padding: 0.25rem;
--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
@@ -18,4 +18,5 @@
--_ui5-notification_item-title-padding-end-two-buttons: 4.875rem;
--_ui5-notification_item-title-padding-end-one-button: 2.375rem;
--_ui5-notification_item-focus-offset: 0.1875rem;
+ --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
index 251e30ff77b3..abec6e1be6bd 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
@@ -3,7 +3,7 @@
:root {
--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
--_ui5-notification_group_header-border-bottom-width: 0;
- --_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+ --_ui5-notification_group_header-margin: 0.75rem;
--_ui5-notification_group_header-padding: 0.5rem;
--_ui5-notification_item-state-icon-padding: 0.25rem;
--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
@@ -18,4 +18,5 @@
--_ui5-notification_item-title-padding-end-two-buttons: 4.875rem;
--_ui5-notification_item-title-padding-end-one-button: 2.375rem;
--_ui5-notification_item-focus-offset: 0.1875rem;
+ --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
}
\ No newline at end of file
diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
index 40d92b5bb07f..f23604c487b9 100644
--- a/packages/fiori/test/pages/NotificationListGroupItem.html
+++ b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -18,6 +18,194 @@
Toggle sapUiSizeCompact
+
+
+
+
+ Notifications
+ Show M. Strip
+ Clear All
+
+
+
+ Something went wrong.
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+
+ And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+
+
+
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+
+ Office Notifications
+ 3 Days
+ And with a very long description - Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
+ dolor,
+ nec elementum lectus turpis at nunc.
+
+
+
+