@umbraco-ui/uui-card-user 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,25 @@
+# uui-card-user
+
+## Usage
+
+```zsh
+npm i @umbraco-ui/uui-card-user
+```
+
+Import the registration of `<uui-card-user>` via:
+
+```javascript
+import '@umbraco-ui/uui-card-user/lib';
+```
+
+When looking to leverage the `UUICardUserElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUICardUserElement } from '@umbraco-ui/uui-card-user/lib/uui-card-user.element';
+```
+
+## Example
+
+```html
+INSERT EXAMPLE
+```

package/custom-elements.json

@@ -0,0 +1,99 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-card-user",
+      "path": "./lib/uui-card-user.element.ts",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "User name",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "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": "name",
+          "attribute": "name",
+          "description": "User name",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null,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 user card title is clicked"
+        },
+        {
+          "name": "selected",
+          "description": "fires when the card is selected"
+        },
+        {
+          "name": "select",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "unselect",
+          "description": "fires when the media card is unselected"
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/index.js

@@ -0,0 +1,120 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+
+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 UUICardUserElement extends UUICardElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+  }
+  render() {
+    return html`
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+      <uui-avatar id="avatar" title=${this.name} size="m"></uui-avatar>
+      <div
+        id="open-part"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        <span> ${this.name} </span>
+      </div>
+      <slot></slot>
+    `;
+  }
+}
+UUICardUserElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        min-width: 250px;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: var(--uui-size-3,9px);
+        align-items: center;
+      }
+
+      slot:not([name])::slotted(*) {
+        font-size: var(--uui-size-4,12px);
+        line-height: var(--uui-size-6,18px);
+      }
+
+      ::slotted(*) {
+        text-align: center;
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        display: flex;
+        justify-content: right;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        right: var(--uui-size-4,12px);
+        display: flex;
+        justify-content: right;
+
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      #avatar {
+        margin: var(--uui-size-3,9px);
+      }
+
+      slot[name='icon']::slotted(*) {
+        font-size: 1.2em;
+      }
+
+      #open-part {
+        display: flex;
+        position: relative;
+        font-weight: 700;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 0 3px 0;
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+      }
+
+      #open-part > span {
+        vertical-align: center;
+        margin-top: 3px;
+      }
+
+      #open-part:hover {
+        text-decoration: underline;
+        color: var(--uui-interface-contrast-hover,#1b264f);
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUICardUserElement.prototype, "name", 2);
+
+customElements.define("uui-card-user", UUICardUserElement);

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

@@ -0,0 +1,18 @@
+import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+/**
+ *  @element uui-card-user
+ *  @fires {UUICardEvent} open - fires when the user card title is clicked
+ *  @fires {UUICardEvent} selected - fires when the card is selected
+ *  @description - Card component for displaying a user node.
+ */
+export declare class UUICardUserElement extends UUICardElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * User name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/lib/uui-card-user.element.js

@@ -0,0 +1,120 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+
+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 UUICardUserElement extends UUICardElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+  }
+  render() {
+    return html`
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+      <uui-avatar id="avatar" title=${this.name} size="m"></uui-avatar>
+      <div
+        id="open-part"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        <span> ${this.name} </span>
+      </div>
+      <slot></slot>
+    `;
+  }
+}
+UUICardUserElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        min-width: 250px;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: var(--uui-size-3,9px);
+        align-items: center;
+      }
+
+      slot:not([name])::slotted(*) {
+        font-size: var(--uui-size-4,12px);
+        line-height: var(--uui-size-6,18px);
+      }
+
+      ::slotted(*) {
+        text-align: center;
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        display: flex;
+        justify-content: right;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        right: var(--uui-size-4,12px);
+        display: flex;
+        justify-content: right;
+
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      #avatar {
+        margin: var(--uui-size-3,9px);
+      }
+
+      slot[name='icon']::slotted(*) {
+        font-size: 1.2em;
+      }
+
+      #open-part {
+        display: flex;
+        position: relative;
+        font-weight: 700;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 0 3px 0;
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+      }
+
+      #open-part > span {
+        vertical-align: center;
+        margin-top: 3px;
+      }
+
+      #open-part:hover {
+        text-decoration: underline;
+        color: var(--uui-interface-contrast-hover,#1b264f);
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUICardUserElement.prototype, "name", 2);
+
+export { UUICardUserElement };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@umbraco-ui/uui-card-user",
+  "version": "0.0.1",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "card",
+    "user"
+  ],
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-card-user"
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "@umbraco-ui/uui-avatar": "~0.0.15",
+    "@umbraco-ui/uui-card": "~0.0.0"
+  },
+  "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-user",
+  "gitHead": "27d48bb352dcac2b08d55958ecba92b28c11d957"
+}