@umbraco-ui/uui-card 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# uui-card
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card?logoColor=%231B264F)
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-card
+```
+
+## Usage
+
+```javascript
+import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+
+class MyCardElement extends UUICardElement {}
+```

package/custom-elements.json

@@ -0,0 +1,82 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-card",
+      "path": "./lib/uui-card.element.ts",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "error",
+          "description": "Set to true to highlight there is an error with this item.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "selectable",
+          "description": "Set to true if you want to be able to select this particular element on.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set to true to highlight there is an error with this item.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "Set to true if you want to be able to select this particular element on.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "open",
+          "description": "fires when the media card title is clicked"
+        },
+        {
+          "name": "select",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "unselect",
+          "description": "fires when the media card is unselected"
+        }
+      ]
+    }
+  ]
+}

package/lib/UUICardEvent.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+declare const UUICardElement_base: (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
+ *  @description - Base card component to be extended by specific cards.
+ */
+export declare class UUICardElement extends UUICardElement_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Set to true to prevent opening of this item.
+     * This does not prevent selection, selection is controlled by property 'selectable'
+     * @type {boolean}
+     * @attr disabled
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Set to true to highlight there is an error with this item.
+     * @type {boolean}
+     * @attr error
+     * @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;
+}
+export {};

package/lib/uui-card.element.js

@@ -0,0 +1,149 @@
+import { LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { 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--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class UUICardElement extends SelectableMixin(LitElement) {
+  constructor() {
+    super();
+    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)
+      return;
+    e.stopPropagation();
+    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+  }
+  handleOpenKeydown(e) {
+    if (this.disabled)
+      return;
+    if (e.key !== "Enter")
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+  }
+}
+UUICardElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        box-sizing: border-box;
+        /* TODO: fix automatic fallback values for shadows before we use them: var(--uui-shadow-depth-1)*/
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        border-radius: var(--uui-border-radius,3px);
+        min-height: var(--uui-layout-medium);
+        background-color: var(--uui-interface-surface,#fefefe);
+        --uui-card-border-width: 3px;
+        transition: box-shadow 100ms ease-out;
+      }
+
+      :host(*) * {
+        /* TODO: implement globally shared outline style */
+        outline-color: var(--uui-interface-outline,#3879ff);
+        outline-offset: 4px;
+      }
+
+      :host(:focus) {
+        outline-color: var(--uui-interface-outline,#3879ff);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+      }
+
+      :host([error]) {
+        border: var(--uui-card-border-width) solid var(--uui-look-danger-border,#d42054);
+      }
+
+      :host([selectable]) {
+        cursor: pointer;
+      }
+
+      :host([disabled]) {
+        background: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
+        color: var(--uui-interface-contrast-disabled,rgb(115, 113, 110));
+      }
+
+      :host([selectable])::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: calc(var(--uui-card-border-width) * -1);
+        width: calc(100% + var(--uui-card-border-width) * 2);
+        height: calc(100% + var(--uui-card-border-width) * 2);
+        box-sizing: border-box;
+        border: var(--uui-card-border-width) solid var(--uui-interface-select,#3544b1);
+        border-radius: calc(
+          var(--uui-border-radius,3px) + var(--uui-card-border-width)
+        );
+        transition: opacity 100ms ease-out;
+        opacity: 0;
+      }
+      :host([selectable]:hover)::after {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:hover)::after {
+        opacity: 0.66;
+      }
+      :host([selectable][selected])::after {
+        opacity: 1;
+      }
+      :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));
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "disabled" })
+], UUICardElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUICardElement.prototype, "error", 2);
+
+export { UUICardElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@umbraco-ui/uui-card",
+  "version": "0.0.1",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "card"
+  ],
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-card"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./lib/index.js",
+  "customElements": "custom-elements.json",
+  "files": [
+    "dist",
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.0.14"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-card",
+  "gitHead": "27d48bb352dcac2b08d55958ecba92b28c11d957"
+}