Revert "align table row selection"

This reverts commit 976b568.

# Conflicts:
#	packages/uui-table/lib/uui-table-row.element.ts

Author: nielslyngsoe

packages/uui-table/lib/uui-table-row.element.ts

@@ -4,7 +4,6 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
-import { ref } from 'lit/directives/ref.js';
 import { queryAssignedElements } from 'lit/decorators.js';
 
 import { UUITableCellElement } from './uui-table-cell.element';
@@ -55,30 +54,21 @@ export class UUITableRowElement extends SelectOnlyMixin(
   }
 
   private updateChildSelectOnly() {
-    const slotCellNodes = this.slotCellNodes;
-    if (slotCellNodes) {
-      slotCellNodes.forEach(el => {
-        if (el instanceof UUITableCellElement) {
+    if (this.slotCellNodes) {
+      this.slotCellNodes.forEach(el => {
+        if (this.elementIsTableCell(el)) {
           el.disableChildInteraction = this.selectOnly;
         }
       });
     }
   }
 
-  #selectAreaChanged(selectArea?: Element | undefined) {
-    this.selectableTarget = selectArea || this;
+  private elementIsTableCell(element: unknown): element is UUITableCellElement {
+    return element instanceof UUITableCellElement;
   }
 
   render() {
-    return html`
-      <slot id="open-part" @slotchanged=${this.updateChildSelectOnly}></slot>
-      <div id="select-border" ${ref(this.#selectAreaChanged)}>
-        <div id="select-top"></div>
-        <div id="select-right"></div>
-        <div id="select-bottom"></div>
-        <div id="select-left"></div>
-      </div>
-    `;
+    return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;
   }
 
   static styles = [
@@ -89,115 +79,20 @@ export class UUITableRowElement extends SelectOnlyMixin(
         outline-offset: -3px;
       }
 
-      :host(:focus) {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus);
-      }
-
-      :host([selectable]) #select-border {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        right: -1px;
-        bottom: -1px;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 120ms;
-      }
-      :host([selectable]) #select-border::after {
-        content: '';
-        position: absolute;
-        z-index: 20;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 2px solid var(--uui-color-selected);
-        border-radius: calc(var(--uui-border-radius) + 2px);
-        pointer-events: none;
-        box-shadow:
-          0 0 4px 0 var(--uui-color-selected),
-          inset 0 0 2px 0 var(--uui-color-selected);
-      }
-
-      :host([selectable]) #select-border #select-top,
-      :host([selectable]) #select-border #select-right,
-      :host([selectable]) #select-border #select-bottom,
-      :host([selectable]) #select-border #select-left {
-        position: absolute;
-        z-index: 2;
-        top: 1px;
-        left: 1px;
-        right: 1px;
-        bottom: 1px;
+      :host([selectable]) {
         cursor: pointer;
-        pointer-events: auto;
-      }
-      :host([selectable]) #select-border #select-top {
-        height: var(--uui-size-space-4);
-        bottom: unset;
-      }
-      :host([selectable]) #select-border #select-right {
-        width: var(--uui-size-space-4);
-        left: unset;
-      }
-      :host([selectable]) #select-border #select-bottom {
-        height: var(--uui-size-space-4);
-        top: unset;
-      }
-      :host([selectable]) #select-border #select-left {
-        width: var(--uui-size-space-4);
-        right: unset;
-      }
-
-      :host([selected]) #select-border {
-        opacity: 1;
-      }
-      :host([selectable]:not([selected]):hover) #select-border {
-        opacity: 0.33;
-      }
-      :host([selectable][selected]:hover) #select-border {
-        opacity: 0.8;
       }
 
-      :host([selectable]:not([selected])) #open-part:hover + #select-border {
-        opacity: 0;
-      }
-      :host([selectable][selected]) #open-part:hover + #select-border {
-        opacity: 1;
-      }
-
-      :host([selectable]:not([selected]):hover) #select-border::after {
-        animation: not-selected--hover 1.2s infinite;
-      }
-      @keyframes not-selected--hover {
-        0%,
-        100% {
-          opacity: 0.66;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-
-      :host([selectable][selected]:hover) #select-border::after {
-        animation: selected--hover 1.4s infinite;
-      }
-      @keyframes selected--hover {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.66;
-        }
+      :host(:focus) {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
-      :host([selectable]) #open-part:hover + #select-border::after {
-        animation: none;
+      :host([selected]) {
+        outline: 2px solid
+          var(--uui-table-row-color-selected, var(--uui-color-selected));
       }
-
-      :host([select-only]) *,
-      :host([select-only]) ::slotted(*) {
-        pointer-events: none;
+      :host([selected]:focus) {
+        outline-color: var(--uui-color-focus);
       }
     `,
   ];