@umbraco-ui/uui-card 0.0.1 → 0.0.2

package/custom-elements.json

@@ -17,9 +17,14 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "select-only",
+          "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
+          "type": "boolean"
+        },
         {
           "name": "selectable",
-          "description": "Set to true if you want to be able to select this particular element on.",
+          "description": "Enable the ability to select this element.",
           "type": "boolean"
         },
         {
@@ -49,10 +54,16 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "selectOnly",
+          "attribute": "select-only",
+          "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
+          "type": "boolean"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "Set to true if you want to be able to select this particular element on.",
+          "description": "Enable the ability to select this element.",
           "type": "boolean"
         },
         {

package/lib/UUICardEvent.d.ts

@@ -2,6 +2,4 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 import { UUICardElement } from './uui-card.element';
 export declare class UUICardEvent extends UUIEvent<{}, UUICardElement> {
     static readonly OPEN = "open";
-    static readonly SELECTED = "selected";
-    static readonly UNSELECTED = "unselected";
 }

package/lib/uui-card.element.d.ts

@@ -1,10 +1,10 @@
 import { LitElement } from 'lit';
-declare const UUICardElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & typeof LitElement;
+declare const UUICardElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectOnlyMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & typeof LitElement;
 /**
  *  @element uui-card
  *  @fires {UUICardEvent} open - fires when the media card title is clicked
- *  @fires {UUICardEvent} select - fires when the media card is selected
- *  @fires {UUICardEvent} unselect - fires when the media card is unselected
+ *  @fires {UUISelectableEvent} select - fires when the media card is selected
+ *  @fires {UUISelectableEvent} unselect - fires when the media card is unselected
  *  @description - Base card component to be extended by specific cards.
  */
 export declare class UUICardElement extends UUICardElement_base {
@@ -24,12 +24,6 @@ export declare class UUICardElement extends UUICardElement_base {
      * @default false
      */
     error: boolean;
-    constructor();
-    private toggleSelect;
-    /** TODO: Move these methods to SelectMixin? */
-    select(): void;
-    deselect(): void;
-    private handleSelectKeydown;
     protected handleOpenClick(e: Event): void;
     protected handleOpenKeydown(e: KeyboardEvent): void;
 }

package/lib/uui-card.element.js

@@ -1,19 +1,14 @@
 import { LitElement, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { SelectableMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { SelectOnlyMixin, SelectableMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 class UUICardEvent extends UUIEvent {
 }
 UUICardEvent.OPEN = "open";
-UUICardEvent.SELECTED = "selected";
-UUICardEvent.UNSELECTED = "unselected";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-typeof require !== "undefined" ? require : (x) => {
-  throw new Error('Dynamic require of "' + x + '" is not supported');
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -23,31 +18,11 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class UUICardElement extends SelectableMixin(LitElement) {
+class UUICardElement extends SelectOnlyMixin(SelectableMixin(LitElement)) {
   constructor() {
-    super();
+    super(...arguments);
     this.disabled = false;
     this.error = false;
-    this.addEventListener("click", this.toggleSelect);
-    this.addEventListener("keydown", this.handleSelectKeydown);
-  }
-  toggleSelect() {
-    if (this.selectable === false)
-      return;
-    this.selected = !this.selected;
-    this.dispatchEvent(new UUICardEvent(this.selected ? UUICardEvent.SELECTED : UUICardEvent.UNSELECTED));
-  }
-  select() {
-    this.selected = true;
-  }
-  deselect() {
-    this.selected = false;
-  }
-  handleSelectKeydown(e) {
-    if (e.key !== " " && e.key !== "Enter")
-      return;
-    e.preventDefault();
-    this.toggleSelect();
   }
   handleOpenClick(e) {
     if (this.disabled)
@@ -132,11 +107,66 @@ UUICardElement.styles = [
       :host([selectable][selected])::after {
         opacity: 1;
       }
+
+      :host([selectable]:not([selected]):hover) #select-border::after {
+        -webkit-animation: not-selected--hover 1.2s infinite;
+                animation: not-selected--hover 1.2s infinite;
+      }
+      @-webkit-keyframes not-selected--hover {
+        0%,
+        100% {
+          opacity: 0.66;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+      @keyframes not-selected--hover {
+        0%,
+        100% {
+          opacity: 0.66;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+
+      :host([selectable][selected]:hover) #select-border::after {
+        -webkit-animation: selected--hover 1.4s infinite;
+                animation: selected--hover 1.4s infinite;
+      }
+      @-webkit-keyframes selected--hover {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.66;
+        }
+      }
+      @keyframes selected--hover {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.66;
+        }
+      }
+      :host([selectable]) #open-part:hover + #select-border::after {
+        -webkit-animation: none;
+                animation: none;
+      }
       :host([error])::after {
         inset: calc(var(--uui-card-border-width) * -2);
         width: calc(100% + calc(var(--uui-card-border-width) * 4));
         height: calc(100% + calc(var(--uui-card-border-width) * 4));
       }
+
+      :host([select-only]) *,
+      :host([select-only]) ::slotted(*) {
+        pointer-events: none;
+      }
     `
 ];
 __decorateClass([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -29,7 +29,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.14"
+    "@umbraco-ui/uui-base": "0.0.15"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -40,5 +40,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card",
-  "gitHead": "27d48bb352dcac2b08d55958ecba92b28c11d957"
+  "gitHead": "2a640ce4460de94e9c92a97310e27b84bbd6edda"
 }