@umbraco-ui/uui-card 1.4.0-rc.1 → 1.4.0-rc.2

package/custom-elements.json

@@ -17,6 +17,18 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "description": "Set an href, this will turns the name of the card into an anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -54,6 +66,20 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "Set an href, this will turns the name of the card into an anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "selectOnly",
           "attribute": "select-only",
@@ -77,7 +103,7 @@
       "events": [
         {
           "name": "open",
-          "description": "fires when the card title is clicked"
+          "description": "fires when the card title is clicked."
         },
         {
           "name": "selected",
@@ -87,6 +113,12 @@
           "name": "deselected",
           "description": "fires when the media card is deselected"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content."
+        }
       ]
     }
   ]

package/lib/index.js

@@ -1,6 +1,6 @@
 import { SelectOnlyMixin, SelectableMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { LitElement, css } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
@@ -27,12 +27,14 @@ let UUICardElement = class extends SelectOnlyMixin(
     this.disabled = false;
     this.error = false;
   }
+  // This is deprecated - use href instead
   handleOpenClick(e) {
     if (this.disabled)
       return;
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
+  // This is deprecated - use href instead
   handleOpenKeydown(e) {
     if (this.disabled)
       return;
@@ -42,6 +44,9 @@ let UUICardElement = class extends SelectOnlyMixin(
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
+  render() {
+    return html`<slot></slot>`;
+  }
 };
 UUICardElement.styles = [
   css`
@@ -123,6 +128,11 @@ UUICardElement.styles = [
       :host([select-only]) ::slotted(*) {
         pointer-events: none;
       }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
     `
 ];
 __decorateClass([
@@ -131,6 +141,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUICardElement.prototype, "error", 2);
+__decorateClass([
+  property({ type: String })
+], UUICardElement.prototype, "href", 2);
+__decorateClass([
+  property({ type: String })
+], UUICardElement.prototype, "target", 2);
 UUICardElement = __decorateClass([
   defineElement("uui-card")
 ], UUICardElement);

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

@@ -2,8 +2,9 @@ import { LitElement } from 'lit';
 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 card title is clicked
- *  @description - Base card component to be extended by specific cards.
+ *  @fires {UUICardEvent} open - fires when the card title is clicked.
+ *  @description - Base card component to be extended by specific card elements.
+ *  @slot - Default content.
  */
 export declare class UUICardElement extends UUICardElement_base {
     static styles: import("lit").CSSResult[];
@@ -22,8 +23,23 @@ export declare class UUICardElement extends UUICardElement_base {
      * @default false
      */
     error: boolean;
+    /**
+     * Set an href, this will turns the name of the card into an anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
     protected handleOpenClick(e: Event): void;
     protected handleOpenKeydown(e: KeyboardEvent): void;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card",
-  "version": "1.4.0-rc.1",
+  "version": "1.4.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.4.0-rc.1"
+    "@umbraco-ui/uui-base": "1.4.0-rc.2"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card",
-  "gitHead": "2ecc805ac912c25d89bc96eaf7f50b97aa85fff0"
+  "gitHead": "f2ace7a943c5c18ae7ec5c047588b16327aa6f95"
 }