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

package/custom-elements.json

@@ -0,0 +1,37 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-form-layout-item",
+      "path": "./lib/uui-form-layout-item.element.ts",
+      "attributes": [
+        {
+          "name": "description",
+          "type": "string | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "type": "string | null"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "for button contents"
+        },
+        {
+          "name": "message",
+          "description": "for extras in the messages container"
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-form-layout-item.element';

package/lib/index.js

@@ -0,0 +1,84 @@
+import { css, LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+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;
+};
+let UUIFormLayoutItemElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.description = null;
+    this._labelSlotHasContent = false;
+    this._labelSlotChanged = (e) => {
+      this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    };
+    this._descriptionSlotHasContent = false;
+    this._descriptionSlotChanged = (e) => {
+      this._descriptionSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    };
+  }
+  render() {
+    return html`
+      <div id="label" style=${this._labelSlotHasContent ? "" : "display: none"}>
+        <slot name="label" @slotchange=${this._labelSlotChanged}></slot>
+      </div>
+      <div
+        id="description"
+        style=${this._descriptionSlotHasContent || this.description !== null ? "" : "display: none"}>
+        ${this.description}
+        <slot
+          name="description"
+          @slotchange=${this._descriptionSlotChanged}></slot>
+      </div>
+      <uui-form-validation-message>
+        <slot></slot>
+        <slot name="message" slot="message"></slot>
+      </uui-form-validation-message>
+    `;
+  }
+};
+UUIFormLayoutItemElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: block;
+        margin-top: var(--uui-size-space-5,18px);
+        margin-bottom: var(--uui-size-space-5,18px);
+      }
+      #label {
+        margin-top: -5px;
+        margin-bottom: 5px;
+      }
+      #description {
+        color: var(--uui-interface-contrast-disabled,rgb(115, 113, 110));
+        font-size: var(--uui-type-small-size,12px);
+      }
+      #label + #description {
+        margin-top: -8px;
+        min-height: 8px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUIFormLayoutItemElement.prototype, "description", 2);
+__decorateClass([
+  state()
+], UUIFormLayoutItemElement.prototype, "_labelSlotHasContent", 2);
+__decorateClass([
+  state()
+], UUIFormLayoutItemElement.prototype, "_descriptionSlotHasContent", 2);
+UUIFormLayoutItemElement = __decorateClass([
+  defineElement("uui-form-layout-item")
+], UUIFormLayoutItemElement);
+
+export { UUIFormLayoutItemElement };

package/lib/uui-form-layout-item.element.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-form-layout-item
+ * @description - Form item composes label, input and validation-messages in a proper layout.
+ * @slot - for button contents
+ * @slot message - for extras in the messages container
+ */
+export declare class UUIFormLayoutItemElement extends LitElement {
+    static styles: import("lit").CSSResult[];
+    description: string | null;
+    private _labelSlotHasContent;
+    private _labelSlotChanged;
+    private _descriptionSlotHasContent;
+    private _descriptionSlotChanged;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-form-layout-item': UUIFormLayoutItemElement;
+    }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@umbraco-ui/uui-form-layout-item",
+  "version": "0.0.1",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Form Item"
+  ],
+  "description": "Umbraco UI form-layout-item component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-form-layout-item"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./dist/uui-form-layout-item.min.js",
+  "module": "./lib/index.js",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.0.16"
+  },
+  "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-form-layout-item",
+  "gitHead": "6fbddfc1295e2ea00a532d4f9eb798165b2d39ac"
+}