@umbraco-ui/uui-card 1.14.1 → 1.15.0

package/lib/index.js

@@ -4,10 +4,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import '@umbraco-ui/uui-checkbox/lib';
 
 class UUICardEvent extends UUIEvent {
+  static {
+    this.OPEN = "open";
+  }
 }
-UUICardEvent.OPEN = "open";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -41,6 +44,19 @@ let UUICardElement = class extends SelectOnlyMixin(
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
+  renderCheckbox() {
+    if (!this.selectable) return;
+    return html`
+      <uui-checkbox
+        id="select-checkbox"
+        label="select"
+        tabindex="-1"
+        ?checked=${this.selected}
+        @click=${(e) => e.stopPropagation()}
+        @change=${() => this.click()}>
+      </uui-checkbox>
+    `;
+  }
   render() {
     return html`<slot id="open-part"></slot>
       <div id="select-border"></div>`;
@@ -194,6 +210,21 @@ UUICardElement.styles = [
         background: var(--uui-color-disabled,#f3f3f5);
         color: var(--uui-color-disabled-contrast,#c4c4c4);
       }
+
+      #select-checkbox {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        left: var(--uui-size-4,12px);
+        opacity: 0;
+        transition: opacity 120ms;
+        z-index: 3;
+      }
+      :host(:focus) #select-checkbox,
+      :host(:focus-within) #select-checkbox,
+      :host(:hover) #select-checkbox,
+      #select-checkbox[checked] {
+        opacity: 1;
+      }
     `
 ];
 __decorateClass([

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '@umbraco-ui/uui-checkbox/lib';
 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;
 /**
  *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
@@ -46,6 +47,7 @@ export declare class UUICardElement extends UUICardElement_base {
     rel?: string;
     protected handleOpenClick(e: Event): void;
     protected handleOpenKeydown(e: KeyboardEvent): void;
+    protected renderCheckbox(): import("lit-html").TemplateResult<1> | undefined;
     protected render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/package.json

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