@umbraco-ui/uui-input-lock 0.1.0

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

package/custom-elements.json

@@ -0,0 +1,270 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-input-lock",
+      "path": "./lib/uui-input-lock.element.ts",
+      "attributes": [
+        {
+          "name": "locked",
+          "description": "Determine the inputs locked state.",
+          "type": "boolean",
+          "default": "\"true\""
+        },
+        {
+          "name": "minlength",
+          "description": "This is a minimum value of the input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "minlength-message",
+          "description": "Minlength validation message.",
+          "type": "boolean"
+        },
+        {
+          "name": "maxlength",
+          "description": "This is a maximum value of the input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "maxlength-message",
+          "description": "Maxlength validation message.",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "label",
+          "description": "Label for input element.",
+          "type": "string"
+        },
+        {
+          "name": "placeholder",
+          "description": "Defines the input placeholder.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "type",
+          "description": "This property specifies the type of input that will be rendered.",
+          "type": "'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'",
+          "default": "\"text\""
+        },
+        {
+          "name": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "locked",
+          "attribute": "locked",
+          "description": "Determine the inputs locked state.",
+          "type": "boolean",
+          "default": "\"true\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null,null]"
+        },
+        {
+          "name": "minlength",
+          "attribute": "minlength",
+          "description": "This is a minimum value of the input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "minlengthMessage",
+          "attribute": "minlength-message",
+          "description": "Minlength validation message.",
+          "type": "boolean"
+        },
+        {
+          "name": "maxlength",
+          "attribute": "maxlength",
+          "description": "This is a maximum value of the input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "maxlengthMessage",
+          "attribute": "maxlength-message",
+          "description": "Maxlength validation message.",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label for input element.",
+          "type": "string"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Defines the input placeholder.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "This property specifies the type of input that will be rendered.",
+          "type": "'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'",
+          "default": "\"text\""
+        },
+        {
+          "name": "formAssociated",
+          "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "requiredMessage",
+          "attribute": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "errorMessage",
+          "attribute": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validationMessage"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "on change"
+        },
+        {
+          "name": "input",
+          "description": "on input"
+        },
+        {
+          "name": "keyup",
+          "description": "on keyup"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "input label - for the input label text."
+        },
+        {
+          "name": "prepend",
+          "description": "for components to render to the left of the input."
+        },
+        {
+          "name": "append",
+          "description": "for components to render to the right of the input."
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-input-lock.element';

package/lib/index.js

@@ -0,0 +1,74 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { css, html } from 'lit';
+import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import { iconLock, iconUnlock } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+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;
+};
+let UUIInputLockElement = class extends UUIInputElement {
+  constructor() {
+    super();
+    this.locked = true;
+    this.readonly = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    demandCustomElement(this, "uui-icon");
+    demandCustomElement(this, "uui-button");
+  }
+  _onLockToggle() {
+    this.readonly = this.locked = !this.locked;
+  }
+  renderIcon() {
+    return this.locked === true ? html`<uui-icon name="lock" .fallback=${iconLock.strings[0]}></uui-icon>` : html`<uui-icon
+          name="unlock"
+          .fallback=${iconUnlock.strings[0]}></uui-icon>`;
+  }
+  renderPrepend() {
+    return html`<uui-button
+      .disabled=${this.disabled}
+      @click=${this._onLockToggle}
+      compact
+      id="lock">
+      ${this.renderIcon()}
+    </uui-button>`;
+  }
+};
+UUIInputLockElement.styles = [
+  ...UUIInputElement.styles,
+  css`
+      #lock {
+        height: 100%;
+
+        --uui-button-padding-top-factor: 0;
+        --uui-button-padding-bottom-factor: 0;
+        --uui-button-padding-left-factor: 0.75;
+        --uui-button-padding-right-factor: 0.75;
+        font-size: 12px;
+      }
+
+      :host([locked]) #input {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIInputLockElement.prototype, "locked", 2);
+UUIInputLockElement = __decorateClass([
+  defineElement("uui-input-lock")
+], UUIInputLockElement);
+
+export { UUIInputLockElement };

package/lib/uui-input-lock.element.d.ts

@@ -0,0 +1,25 @@
+import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+/**
+ * @element uui-input-lock
+ * @extends uui-input
+ */
+export declare class UUIInputLockElement extends UUIInputElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Determine the inputs locked state.
+     * @type {boolean}
+     * @attr
+     * @default true
+     */
+    locked: boolean;
+    constructor();
+    connectedCallback(): void;
+    _onLockToggle(): void;
+    renderIcon(): import("lit-html").TemplateResult<1>;
+    renderPrepend(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-input-lock': UUIInputLockElement;
+    }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@umbraco-ui/uui-input-lock",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Input Lock"
+  ],
+  "description": "Umbraco UI input-lock component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-input-lock"
+  },
+  "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": "0.1.0",
+    "@umbraco-ui/uui-button": "0.2.0",
+    "@umbraco-ui/uui-icon": "0.1.0",
+    "@umbraco-ui/uui-input": "0.1.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-input-lock",
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
+}