@umbraco-ui/uui-card-block-type 1.6.0-rc.2

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,31 @@
+# uui-card-block-type
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-block-type?logoColor=%231B264F)
+
+Umbraco style card-block-type component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-card-block-type
+```
+
+Import the registration of `<uui-card-block-type>` via:
+
+```javascript
+import '@umbraco-ui/uui-card-block-type';
+```
+
+When looking to leverage the `UUICardBlockTypeElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUICardBlockTypeElement } from '@umbraco-ui/uui-card-block-type';
+```
+
+## Usage
+
+```html
+<uui-card-block-type></uui-card-block-type>
+```

package/custom-elements.json

@@ -0,0 +1,160 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-card-block-type",
+      "path": "./lib/uui-card-block-type.element.ts",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Block type name",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "description",
+          "description": "Block type description",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "background",
+          "type": "string | undefined"
+        },
+        {
+          "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": "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.",
+          "type": "boolean"
+        },
+        {
+          "name": "selectable",
+          "description": "Enable the ability to select this element.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Block type name",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Block type description",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "background",
+          "attribute": "background",
+          "type": "string | undefined"
+        },
+        {
+          "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": "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": "styles",
+          "type": "CSSResult[]",
+          "default": "[null,null]"
+        },
+        {
+          "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": "Enable the ability to select this element.",
+          "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 card title is clicked."
+        },
+        {
+          "name": "selected",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "deselected",
+          "description": "fires when the media card is deselected"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content."
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-card-block-type.element';

package/lib/index.js

@@ -0,0 +1,195 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html, nothing } from 'lit';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _renderButton, renderButton_fn, _renderLink, renderLink_fn;
+let UUICardBlockTypeElement = class extends UUICardElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderButton);
+    __privateAdd(this, _renderLink);
+    this.name = "";
+  }
+  render() {
+    return html`
+      <div
+        id="portrait"
+        style=${styleMap({ backgroundColor: this.background })}>
+        <slot></slot>
+      </div>
+      ${this.href ? __privateMethod(this, _renderLink, renderLink_fn).call(this) : __privateMethod(this, _renderButton, renderButton_fn).call(this)}
+
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+};
+_renderButton = new WeakSet();
+renderButton_fn = function() {
+  return html`
+      <button
+        id="open-part"
+        tabindex=${this.disabled ? nothing : "0"}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        <strong>${this.name}</strong><small>${this.description}</small>
+      </button>
+    `;
+};
+_renderLink = new WeakSet();
+renderLink_fn = function() {
+  return html`
+      <a
+        id="open-part"
+        tabindex=${this.disabled ? nothing : "0"}
+        href=${ifDefined(!this.disabled ? this.href : void 0)}
+        target=${ifDefined(this.target || void 0)}
+        rel=${ifDefined(
+    this.target === "_blank" ? "noopener noreferrer" : void 0
+  )}>
+        <strong>${this.name}</strong><small>${this.description}</small>
+      </a>
+    `;
+};
+UUICardBlockTypeElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
+
+      :host(:hover) #info {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+
+      #portrait {
+        background-color: var(--uui-color-surface-alt,#f3f3f5);
+        display: flex;
+        justify-content: center;
+        min-height: 150px;
+        max-height: 150px;
+      }
+
+      slot:not([name])::slotted(*) {
+        align-self: center;
+        font-size: var(--uui-size-8,24px);
+        border-radius: var(--uui-border-radius,3px);
+        object-fit: cover;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      #open-part {
+        text-align: left;
+        background-color: var(--uui-color-surface,#fff);
+        cursor: pointer;
+        color: var(--uui-color-interactive,#1b264f);
+        border: none;
+        border-top: 1px solid var(--uui-color-divider,#f6f6f7);
+        border-radius: 0 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px);
+        font-family: inherit;
+        font-size: var(--uui-type-small-size,12px);
+        box-sizing: border-box;
+        padding: var(--uui-size-2,6px) var(--uui-size-4,12px);
+        display: flex;
+        flex-direction: column;
+        line-height: var(--uui-size-6,18px);
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+        background: var(--uui-color-disabled,#f3f3f5);
+        color: var(--uui-color-contrast-disabled);
+      }
+
+      #open-part:hover strong {
+        text-decoration: underline;
+      }
+      #open-part:hover {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+
+      :host([image]:not([image=''])) #open-part {
+        transition: opacity 0.5s 0.5s;
+        opacity: 0;
+      }
+      slot[name='tag'] {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        right: var(--uui-size-4,12px);
+        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;
+      }
+
+      :host(
+          [image]:not([image='']):hover,
+          [image]:not([image='']):focus,
+          [image]:not([image='']):focus-within,
+          [selected][image]:not([image='']),
+          [error][image]:not([image=''])
+        )
+        #open-part {
+        opacity: 1;
+        transition-duration: 120ms;
+        transition-delay: 0s;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUICardBlockTypeElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], UUICardBlockTypeElement.prototype, "description", 2);
+__decorateClass([
+  property({ type: String, attribute: "background" })
+], UUICardBlockTypeElement.prototype, "background", 2);
+UUICardBlockTypeElement = __decorateClass([
+  defineElement("uui-card-block-type")
+], UUICardBlockTypeElement);
+
+export { UUICardBlockTypeElement };

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

@@ -0,0 +1,33 @@
+import { UUICardElement } from '@umbraco-ui/uui-card/lib';
+export type BlockTypeIcon = {
+    name?: string;
+    color?: string;
+};
+/**
+ * @element uui-card-block-type
+ */
+export declare class UUICardBlockTypeElement extends UUICardElement {
+    #private;
+    /**
+     * Block type name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    /**
+     * Block type description
+     * @type {string}
+     * @attr description
+     * @default undefined
+     */
+    description?: string;
+    background?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-block-type': UUICardBlockTypeElement;
+    }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@umbraco-ui/uui-card-block-type",
+  "version": "1.6.0-rc.2",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Card Block Type"
+  ],
+  "description": "Umbraco UI card-block-type component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-card-block-type"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.6.0-rc.2",
+    "@umbraco-ui/uui-card": "1.6.0-rc.2"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts 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-block-type",
+  "gitHead": "5d4eefce4744802ab5bc40055b1a3136f0afc520"
+}