@elderbyte/ngx-starter 19.1.27 → 19.2.1

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -1,5 +1,14 @@
 $elder-tile-padding: 8px;
 
+.elder-grid-tile {
+  flex: 0 1 100%;
+  flex-grow: 1;
+  margin: 0 $elder-tile-padding;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
 .elder-grid-tile-row {
   display: flex;
   flex-direction: row;
@@ -16,36 +25,6 @@ $elder-tile-padding: 8px;
   height: 100%;
 }
 
-.elder-grid-tile-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.elder-grid-tile-overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transition:
-    background-color 0.1s ease-in,
-    opacity 0.1s ease-in;
-}
-
-.elder-click-through {
-  pointer-events: none;
-}
-
-.elder-grid-tile-overlay-visible {
-  opacity: 1;
-}
-
-.elder-grid-tile-overlay-hidden {
-  opacity: 0;
-}
-
 .elder-grid-container {
   background-color: var(--elder-grid-background-color);
 }
@@ -65,53 +44,3 @@ $elder-tile-padding: 8px;
 .elder-grid-footer {
   min-height: var(--elder-data-element-footer-height);
 }
-
-.elder-grid-tile {
-  overflow: hidden;
-  flex: 0 1 100%;
-  flex-grow: 1;
-  margin: 0 $elder-tile-padding;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  border-radius: var(--elder-pane-border-radius);
-  background-color: var(--md-sys-color-surface-container-low);
-  text-align: left;
-  transition:
-    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
-    border 0.25s linear;
-}
-
-.elder-grid-tile:hover {
-  //border-color: rgba(var(--md-sys-color-primary), 0.75);
-  border-color: var(--md-sys-color-primary);
-}
-
-.elder-grid-tile-content:hover .elder-grid-tile-overlay {
-  opacity: 1;
-  background-color: rgba(white, 0.08);
-}
-
-.elder-grid-tile:active {
-  z-index: 100;
-  box-shadow: var(--elder-box-shadow-default);
-}
-
-.elder-grid-tile-check {
-  pointer-events: auto;
-  mat-icon {
-    color: var(--md-sys-color-outline-variant);
-    background-color: var(--md-sys-color-surface);
-    border-radius: 12px;
-  }
-
-  mat-icon.elder-selected {
-    color: var(--md-sys-color-tertiary);
-  }
-}
-
-.elder-grid-tile-check:hover {
-  mat-icon {
-    color: var(--md-sys-color-primary);
-  }
-}

package/src/lib/components/data-view/grid/elder-tile/elder-tile.component.scss

@@ -0,0 +1,110 @@
+.elder-tile {
+  border-radius: var(--elder-pane-border-radius);
+  background-color: var(--md-sys-color-surface-container-low);
+  text-align: left;
+  overflow: hidden;
+  transition:
+    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
+    border 0.25s linear;
+}
+
+.elder-tile:hover {
+  //border-color: rgba(var(--md-sys-color-primary), 0.75);
+  border-color: var(--md-sys-color-primary);
+}
+
+.elder-tile-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  border-radius: var(--elder-pane-border-radius);
+}
+
+.elder-tile-content:hover .elder-tile-overlay {
+  opacity: 1;
+  background-color: rgba(white, 0.08);
+}
+
+.elder-tile:active {
+  z-index: 100;
+  box-shadow: var(--elder-box-shadow-default);
+}
+
+.elder-selection-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition:
+    background-color 0.1s ease-in,
+    opacity 0.1s ease-in;
+}
+
+.elder-tile-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.elder-selection-overlay-visible {
+  opacity: 1;
+  tab-index: 0;
+}
+
+.elder-selection-overlay-hidden {
+  opacity: 0;
+  tab-index: -1;
+}
+
+.elder-click-through {
+  pointer-events: none;
+}
+
+.elder-tile-check {
+  pointer-events: auto;
+  mat-icon {
+    color: var(--md-sys-color-outline-variant);
+    background-color: var(--md-sys-color-surface);
+    border-radius: 12px;
+  }
+
+  mat-icon.elder-selected {
+    color: var(--md-sys-color-tertiary);
+  }
+}
+
+.elder-tile-check:hover {
+  mat-icon {
+    color: var(--md-sys-color-primary);
+  }
+}
+
+.elder-tile:focus {
+  // Disable browser focus style
+  // box-shadow: color-mix(in rgb, 80%, black);
+  //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
+  outline: 2px solid var(--elder-color-highlight-focus);
+
+  // background-color: var(--elder-color-highlight-strong);
+}
+
+.elder-tile.activated:focus {
+  // Disable browser focus style
+  // box-shadow: color-mix(in rgb, 80%, black);
+  //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
+  outline: 2px solid var(--elder-color-highlight-focus);
+  // background-color: var(--elder-color-highlight-strong);
+}
+
+.elder-tile.activated {
+  // background-color: var(--elder-color-highlight-strong);
+  outline: 2px dashed var(--elder-color-highlight-focus);
+  .elder-tile-overlay {
+    // opacity: 1;
+    // background-color: color-mix(in sRGB, var(--elder-color-highlight-strong), transparent 70%);
+  }
+}

package/theming/abstracts/_elder-design-tokens.scss

@@ -122,11 +122,16 @@
     --elder-blue: var(--md-sys-color-primary);
     --md-sys-color-tertiary: var(--elder-gold);
 
-    --elder-color-highlight-strong: hsl(214, 18%, 85%);
     --elder-color-highlight-strong: var(--elder-gold-light);
     --elder-color-highlight-light: #ebebeb;
     --elder-color-highlight-variant: var(--md-sys-color-secondary-fixed);
 
+    --elder-color-highlight-focus: color-mix(
+      in sRGB,
+      var(--elder-color-highlight-strong) 80%,
+      black
+    );
+
     // missing md3 color
     --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-primary-fixed);
     --md-sys-color-on-tertiary-fixed-dim: var(--md-sys-color-on-tertiary-container);
@@ -207,6 +212,13 @@
     --elder-color-highlight-light: var(--elder-gray-medium);
     --elder-color-highlight-strong: var(--elder-gold-semi-dark);
     --elder-color-highlight-variant: var(--elder-gold-dark);
+
+    --elder-color-highlight-focus: color-mix(
+      in sRGB,
+      var(--elder-color-highlight-strong) 70%,
+      white
+    );
+
     --md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
     --md-sys-color-surface-container-highest: #181818;
     --md-sys-color-surface-container: #1e1f20;

package/lib/components/data-view/table/activation/elder-activation-context.d.ts

@@ -1,7 +0,0 @@
-import { Observable } from 'rxjs';
-import { ItemActivationEvent } from './item-activation-event';
-import { ItemActivationOptions } from './item-activation-options';
-export interface ElderActivationContext<T> {
-    activate(item: T, options: ItemActivationOptions): void;
-    get activeItemEventChange(): Observable<ItemActivationEvent<T>>;
-}

package/lib/components/data-view/table/activation/elder-table-activation-options.d.ts

@@ -1,16 +0,0 @@
-export type ElderTableActivationMode = 'once' | 'always';
-export type ElderTableActivationRow = 'none' | 'first' | 'last';
-export interface ElderTableActivationOptions {
-    /**
-     * After reaching the last element, start over at the first?
-     */
-    loop?: boolean;
-    /**
-     * Attempt to activate a row when the rows change.
-     */
-    mode?: ElderTableActivationMode;
-    /**
-     * Activate the specified row, if no other row is currently activated.
-     */
-    row?: ElderTableActivationRow;
-}