diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index a9f40a644a0f..7200d140d479 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -1,6 +1,7 @@ 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event.js"; @@ -122,13 +123,6 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { @property({ type: Boolean }) private active!: boolean; - /** - * Indicates whether the element is focused. - * @private - */ - @property({ type: Boolean }) - private focused!: boolean; - /** * Used to set the selected state of the component. Only one selected in a sequence. * **Note:** Set by the `ProductSwitch` @@ -146,6 +140,10 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { onEnterDOM() { document.addEventListener("mouseup", this._deactivate); + + if (isDesktop()) { + this.setAttribute("desktop", ""); + } } onExitDOM() { @@ -185,12 +183,9 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { _onfocusout() { this.active = false; - this.focused = false; } _onfocusin(e: FocusEvent) { - this.focused = true; - this.fireEvent("_focused", e); } diff --git a/packages/fiori/src/themes/ProductSwitchItem.css b/packages/fiori/src/themes/ProductSwitchItem.css index cc01f71384ba..739a43e24a3b 100644 --- a/packages/fiori/src/themes/ProductSwitchItem.css +++ b/packages/fiori/src/themes/ProductSwitchItem.css @@ -4,25 +4,24 @@ margin: .25rem; border-radius: .25rem; box-sizing: border-box; - background:var(--sapList_Background); + background: var(--sapList_Background); } -:host([selected]) { +:host([selected]) .ui5-product-switch-item-root { background: var(--sapList_SelectionBackgroundColor); border: 0.125rem solid var(--sapList_SelectionBorderColor); } -:host(:hover) { - background:var(--sapList_Hover_Background); +:host(:hover) .ui5-product-switch-item-root { + background :var(--sapList_Hover_Background); } -:host([selected]:hover) { +:host([selected]:hover) .ui5-product-switch-item-root { background: var(--sapList_Hover_SelectionBackground); } - -:host([active]), -:host([selected][active]) { +:host([active]) .ui5-product-switch-item-root, +:host([selected][active]) .ui5-product-switch-item-root { background: var(--sapList_Active_Background); } @@ -32,12 +31,14 @@ color:var(--sapList_Active_TextColor); } -:host([focused]) { +:host([desktop]) .ui5-product-switch-item-root:focus-within, +.ui5-product-switch-item-root:focus-visible { outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); outline-offset:var(--_ui5_product_switch_item_outline_offset) } -:host([active][focused]) { +:host([desktop][active]) .ui5-product-switch-item-root:focus-within, +:host([active]) .ui5-product-switch-item-root:focus-visible { outline-color: var(--_ui5_product_switch_item_active_outline_color); } @@ -155,24 +156,3 @@ padding-top: .75rem; } } - -[ui5-product-switch-item][focused] { - outline: none; - position: relative; -} - -[ui5-product-switch-item][focused] .ui5-product-switch-item-root::after { - content: ""; - position: absolute; - border-color: var(--_ui5_product_switch_item_outline_color); - border-width: var(--_ui5_product_switch_item_outline_width); - border-style: dotted; - top: var(--_ui5_product_switch_item_outline_offset_positive); - bottom: var(--_ui5_product_switch_item_outline_offset_positive); - left: var(--_ui5_product_switch_item_outline_offset_positive); - right: var(--_ui5_product_switch_item_outline_offset_positive); -} - -[ui5-product-switch-item][active][focused] .ui5-product-switch-item-root::after { - border-color: var(--_ui5_product_switch_item_active_outline_color); -}