@umbraco-ui/uui-input-lock 1.13.0 → 1.14.0-rc.1

package/custom-elements.json

@@ -11,6 +11,18 @@
           "type": "boolean",
           "default": "\"true\""
         },
+        {
+          "name": "unlock-label",
+          "description": "Define the label for the unlock button.",
+          "type": "string",
+          "default": "\"true\""
+        },
+        {
+          "name": "lock-label",
+          "description": "Define the label for the lock button.",
+          "type": "string",
+          "default": "\"true\""
+        },
         {
           "name": "min",
           "description": "Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.",
@@ -26,7 +38,7 @@
         {
           "name": "minlength-message",
           "description": "Minlength validation message.",
-          "type": "string",
+          "type": "string | ((charsLeft: number) => string)",
           "default": "\"\""
         },
         {
@@ -44,7 +56,7 @@
         {
           "name": "maxlength-message",
           "description": "Maxlength validation message.",
-          "type": "string",
+          "type": "string | ((max: number, current: number) => string)",
           "default": "\"\""
         },
         {
@@ -86,7 +98,13 @@
         {
           "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'",
+          "type": "'text' | 'tel' | 'url' | 'email' | 'password' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'color'",
+          "default": "\"text\""
+        },
+        {
+          "name": "inputmode",
+          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
+          "type": "'text' | 'none' | 'decimal' | 'number' | 'tel' | 'search' | 'email' | 'url'",
           "default": "\"text\""
         },
         {
@@ -95,10 +113,10 @@
           "type": "string"
         },
         {
-          "name": "inputMode",
-          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
-          "type": "string",
-          "default": "\"\""
+          "name": "tabindex",
+          "description": "Set the input tabindex, set this to `-1` to avoid tabbing into the input.",
+          "type": "number",
+          "default": "-1"
         },
         {
           "name": "spellcheck",
@@ -161,6 +179,20 @@
           "type": "boolean",
           "default": "\"true\""
         },
+        {
+          "name": "unlockLabel",
+          "attribute": "unlock-label",
+          "description": "Define the label for the unlock button.",
+          "type": "string",
+          "default": "\"true\""
+        },
+        {
+          "name": "lockLabel",
+          "attribute": "lock-label",
+          "description": "Define the label for the lock button.",
+          "type": "string",
+          "default": "\"true\""
+        },
         {
           "name": "min",
           "attribute": "min",
@@ -179,7 +211,7 @@
           "name": "minlengthMessage",
           "attribute": "minlength-message",
           "description": "Minlength validation message.",
-          "type": "string",
+          "type": "string | ((charsLeft: number) => string)",
           "default": "\"\""
         },
         {
@@ -200,7 +232,7 @@
           "name": "maxlengthMessage",
           "attribute": "maxlength-message",
           "description": "Maxlength validation message.",
-          "type": "string",
+          "type": "string | ((max: number, current: number) => string)",
           "default": "\"\""
         },
         {
@@ -249,7 +281,14 @@
           "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'",
+          "type": "'text' | 'tel' | 'url' | 'email' | 'password' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'color'",
+          "default": "\"text\""
+        },
+        {
+          "name": "inputMode",
+          "attribute": "inputmode",
+          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
+          "type": "'text' | 'none' | 'decimal' | 'number' | 'tel' | 'search' | 'email' | 'url'",
           "default": "\"text\""
         },
         {
@@ -259,11 +298,11 @@
           "type": "string"
         },
         {
-          "name": "inputMode",
-          "attribute": "inputMode",
-          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
-          "type": "string",
-          "default": "\"\""
+          "name": "tabIndex",
+          "attribute": "tabindex",
+          "description": "Set the input tabindex, set this to `-1` to avoid tabbing into the input.",
+          "type": "number",
+          "default": "-1"
         },
         {
           "name": "styles",

package/lib/index.js

@@ -1,6 +1,6 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { html, css } from 'lit';
+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';
@@ -18,6 +18,9 @@ UUIInputLockEvent.LOCK_CHANGE = "lock-change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 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--)
@@ -26,11 +29,26 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _locked;
 let UUIInputLockElement = class extends UUIInputElement {
   constructor() {
     super();
-    this.locked = true;
+    __privateAdd(this, _locked, true);
+    this.unlockLabel = "Unlock input";
+    this.lockLabel = "Lock input";
     this.readonly = true;
+    this.tabIndex = -1;
+  }
+  set locked(lock) {
+    __privateSet(this, _locked, lock);
+    this.tabIndex = lock ? -1 : 0;
+  }
+  get locked() {
+    return __privateGet(this, _locked);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -41,6 +59,9 @@ let UUIInputLockElement = class extends UUIInputElement {
     this.readonly = this.locked = !this.locked;
     this.pristine = false;
     this.dispatchEvent(new UUIInputLockEvent(UUIInputLockEvent.LOCK_CHANGE));
+    if (!this.locked) {
+      this._input?.focus();
+    }
   }
   renderIcon() {
     return this.locked === true ? html`<uui-icon name="lock" .fallback=${iconLock.strings[0]}></uui-icon>` : html`<uui-icon
@@ -53,11 +74,12 @@ let UUIInputLockElement = class extends UUIInputElement {
       @click=${this._onLockToggle}
       compact
       id="lock"
-      label="${this.locked ? "Unlock input" : "Lock input"}">
+      label="${this.locked ? this.unlockLabel : this.lockLabel}">
       ${this.renderIcon()}
     </uui-button>`;
   }
 };
+_locked = new WeakMap();
 UUIInputLockElement.styles = [
   ...UUIInputElement.styles,
   css`
@@ -77,7 +99,13 @@ UUIInputLockElement.styles = [
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], UUIInputLockElement.prototype, "locked", 2);
+], UUIInputLockElement.prototype, "locked", 1);
+__decorateClass([
+  property({ type: String, reflect: false, attribute: "unlock-label" })
+], UUIInputLockElement.prototype, "unlockLabel", 2);
+__decorateClass([
+  property({ type: String, reflect: false, attribute: "lock-label" })
+], UUIInputLockElement.prototype, "lockLabel", 2);
 UUIInputLockElement = __decorateClass([
   defineElement("uui-input-lock")
 ], UUIInputLockElement);

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

@@ -4,13 +4,29 @@ import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
  * @extends uui-input
  */
 export declare class UUIInputLockElement extends UUIInputElement {
+    #private;
     /**
      * Determine the inputs locked state.
      * @type {boolean}
      * @attr
      * @default true
      */
-    locked: boolean;
+    set locked(lock: boolean);
+    get locked(): boolean;
+    /**
+     * Define the label for the unlock button.
+     * @type {string}
+     * @attr
+     * @default true
+     */
+    unlockLabel: string;
+    /**
+     * Define the label for the lock button.
+     * @type {string}
+     * @attr
+     * @default true
+     */
+    lockLabel: string;
     constructor();
     connectedCallback(): void;
     _onLockToggle(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-input-lock",
-  "version": "1.13.0",
+  "version": "1.14.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,10 +30,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.13.0",
-    "@umbraco-ui/uui-button": "1.13.0",
-    "@umbraco-ui/uui-icon": "1.13.0",
-    "@umbraco-ui/uui-input": "1.13.0"
+    "@umbraco-ui/uui-base": "1.14.0-rc.1",
+    "@umbraco-ui/uui-button": "1.14.0-rc.1",
+    "@umbraco-ui/uui-icon": "1.14.0-rc.1",
+    "@umbraco-ui/uui-input": "1.14.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-input-lock",
-  "gitHead": "f57b1fdfea3678b843fbec706cecb3a220f6046f"
+  "gitHead": "c3c2fc0f8a68b897b5c88e0c3e09f549150f1034"
 }