@aquera/nile-elements 1.6.0 → 1.6.2

package/dist/nile-otp-input/nile-otp-input.css.esm.js

@@ -0,0 +1,257 @@
+import{css as r}from"lit";const o=r`
+  :host {
+    display: block;
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing, antialiased));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing, grayscale));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering, optimizeLegibility));
+  }
+
+  .form-control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-1-5));
+    align-items: flex-start;
+  }
+
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500 ));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm ));
+    letter-spacing: 0.2px;
+  }
+
+  :host([required]) .form-control--has-label .form-control__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+  }
+
+  .otp {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  /* ---- Base cell ---- */
+
+  .otp__cell {
+    box-sizing: border-box;
+    width: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    height: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    min-height: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-0-5)) var(--nile-spacing-md, var(--ng-spacing-2));
+    border: 1px solid var(--nile-colors-border-field, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    text-align: center;
+    font-family: var(--nile-font-family, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
+    letter-spacing: 0.2px;
+    overflow: clip;
+    caret-color: transparent;
+    cursor: pointer;
+    transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color, 150ms outline;
+  }
+
+  .otp__cell[type='password'] {
+    font-family: caption;
+    letter-spacing: 0;
+  }
+  /* ---- Hover (mirrors .input--standard:hover) ---- */
+
+  .otp:not(.otp--disabled):not(.otp--readonly) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));
+  }
+
+  .otp--warning:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));
+  }
+
+  .otp--error:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));
+  }
+
+  .otp--success:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));
+  }
+
+  /* ---- Focus / active cell (mirrors .input--standard.input--focused) ---- */
+
+  .otp__cell:focus {
+    outline: none;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+  }
+
+  .otp__cell--active {
+    position: relative;
+    cursor: text;
+    caret-color: auto;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary ));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+  }
+
+  .otp__cell--active::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+  }
+
+  .otp--warning .otp__cell:focus,
+  .otp--warning .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));
+  }
+
+  .otp--warning .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
+  }
+
+  .otp--success .otp__cell:focus,
+  .otp--success .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));
+  }
+
+  .otp--success .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-green-500, var(--ng-colors-border-success));
+  }
+
+  .otp--error .otp__cell:focus,
+  .otp--error .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));
+  }
+
+  .otp--error .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-red-500, var(--ng-colors-border-error));
+  }
+
+  .otp__cell::selection {
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-primary ));
+    color: var(--nile-colors-white-base, var(--ng-colors-fg-white));
+  }
+
+  .otp__cell::placeholder {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    opacity: 0.9;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+  }
+
+  /* ---- Separator ---- */
+
+  .otp__separator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    font-family: var(--nile-font-family, var(--ng-font-family-display ));
+    font-size: var(--nile-type-scale-7, var(--ng-font-size-text-xl));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-type-scale-7, var(--ng-line-height-text-xl));
+    user-select: none;
+  }
+
+  /* ---- State: warning ---- */
+
+  .otp--warning .otp__cell {
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle ));
+  }
+
+  /* ---- State: error ---- */
+
+  .otp--error .otp__cell {
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle ));
+  }
+
+  /* ---- State: success ---- */
+
+  .otp--success .otp__cell {
+    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
+  }
+
+  /* ---- State: readonly ---- */
+
+  .otp--readonly .otp__cell {
+    cursor: default;
+  }
+
+  /* ---- State: disabled (mirrors .input--standard.input--disabled) ---- */
+
+  .otp--disabled .otp__cell {
+    cursor: not-allowed;
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled ));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled ));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle ));
+  }
+
+  .otp--disabled .otp__cell::placeholder {
+    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled ));
+  }
+
+  /* ---- Hidden value input ---- */
+
+  .otp__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  /* ---- Help text ---- */
+
+  .form-control__help-text {
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400 ));
+    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm ));
+    letter-spacing: 0.2px;
+  }
+
+  /* ---- Error message ---- */
+
+  .form-control__error-message {
+    display: block;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-1-5 ));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    line-height: var(--nile-form-error-text-line-height, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+`;export{o as s};

package/dist/nile-otp-input/nile-otp-input.enum.cjs.js

@@ -0,0 +1,2 @@
+System.register([],function(_export,_context){"use strict";var n,e,t,a,o;_export({a:void 0,b:void 0,d:void 0,O:void 0,c:void 0});return{setters:[],execute:function execute(){!function(n){n.NONE="none",n.TEXT="text",n.DECIMAL="decimal",n.NUMERIC="numeric",n.TEL="tel",n.SEARCH="search",n.EMAIL="email",n.URL="url";}(n||_export("a",n={})),function(n){n.TEXT="text",n.PASSWORD="password";}(e||_export("b",e={})),function(n){n.DONE="done",n.NEXT="next";}(t||_export("d",t={})),function(n){n.ONE_TIME_CODE="one-time-code",n.OFF="off";}(a||_export("O",a={})),function(n){n.NUMERIC="[0-9]*",n.ALPHANUMERIC="[A-Za-z0-9]*";}(o||_export("c",o={}));}};});
+//# sourceMappingURL=nile-otp-input.enum.cjs.js.map

package/dist/nile-otp-input/nile-otp-input.enum.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-otp-input.enum.cjs.js","sources":["../../../src/nile-otp-input/nile-otp-input.enum.ts"],"sourcesContent":["export enum OtpInputMode {\n  NONE = 'none',\n  TEXT = 'text',\n  DECIMAL = 'decimal',\n  NUMERIC = 'numeric',\n  TEL = 'tel',\n  SEARCH = 'search',\n  EMAIL = 'email',\n  URL = 'url',\n}\n\nexport enum OtpInputType {\n  TEXT = 'text',\n  PASSWORD = 'password',\n}\n\nexport enum OtpEnterKeyHint {\n  DONE = 'done',\n  NEXT = 'next',\n}\n\nexport enum OtpAutoComplete {\n  ONE_TIME_CODE = 'one-time-code',\n  OFF = 'off',\n}\n\nexport enum OtpCellPattern {\n  NUMERIC = '[0-9]*',\n  ALPHANUMERIC = '[A-Za-z0-9]*',\n}\n"],"names":["OtpInputMode","NONE","TEXT","DECIMAL","NUMERIC","TEL","SEARCH","EMAIL","URL","OtpInputType","PASSWORD","OtpEnterKeyHint","DONE","NEXT","OtpAutoComplete","ONE_TIME_CODE","OFF","OtpCellPattern","ALPHANUMERIC"],"mappings":"+KAAA,SAAYA,CAAAA,CAAAA,CACVA,EAAAC,IAAA,CAAA,MAAA,CACAD,EAAAE,IAAA,CAAA,MAAA,CACAF,EAAAG,OAAA,CAAA,SAAA,CACAH,EAAAI,OAAA,CAAA,SAAA,CACAJ,CAAA,CAAAK,GAAA,CAAA,KACAL,CAAAA,CAAAA,CAAAM,OAAA,QACAN,CAAAA,CAAAA,CAAAO,MAAA,OACAP,CAAAA,CAAAA,CAAAQ,IAAA,KACD,EATD,CAAYR,CAAAA,EAAAA,OAAAA,KAAAA,CAAAA,CASX,CAAA,CAED,CAAA,CAAA,CAAA,SAAYS,GACVA,CAAA,CAAAP,IAAA,CAAA,OACAO,CAAA,CAAAC,QAAA,CAAA,UACD,EAHD,CAAYD,CAAAA,EAAAA,OAAAA,KAAAA,EAGX,CAAA,CAAA,CAAA,CAAA,CAED,SAAYE,CACVA,CAAAA,CAAAA,CAAAA,CAAAC,KAAA,MACAD,CAAAA,CAAAA,CAAAE,KAAA,MACD,EAHD,CAAYF,CAAAA,EAAAA,OAAAA,KAAAA,CAAAA,CAGX,CAAA,CAED,CAAA,CAAA,CAAA,SAAYG,GACVA,CAAA,CAAAC,aAAA,CAAA,eACAD,CAAAA,CAAAA,CAAAE,GAAA,CAAA,KACD,EAHD,CAAYF,CAAAA,EAAAA,OAAAA,KAAAA,EAGX,CAAA,CAAA,CAAA,CAAA,CAED,SAAYG,CACVA,CAAAA,CAAAA,CAAAA,CAAAb,QAAA,QACAa,CAAAA,CAAAA,CAAAC,aAAA,cACD,EAHD,CAAYD,CAAAA,EAAAA,OAAAA,KAAAA,CAAAA,CAGX,CAAA"}

package/dist/nile-otp-input/nile-otp-input.enum.esm.js

@@ -0,0 +1 @@
+var n,e,t,a,o;!function(n){n.NONE="none",n.TEXT="text",n.DECIMAL="decimal",n.NUMERIC="numeric",n.TEL="tel",n.SEARCH="search",n.EMAIL="email",n.URL="url"}(n||(n={})),function(n){n.TEXT="text",n.PASSWORD="password"}(e||(e={})),function(n){n.DONE="done",n.NEXT="next"}(t||(t={})),function(n){n.ONE_TIME_CODE="one-time-code",n.OFF="off"}(a||(a={})),function(n){n.NUMERIC="[0-9]*",n.ALPHANUMERIC="[A-Za-z0-9]*"}(o||(o={}));export{a as O,n as a,e as b,o as c,t as d};

package/dist/nile-otp-input/nile-otp-input.esm.js

@@ -0,0 +1,103 @@
+import{__decorate as t}from"tslib";import{html as i}from"lit";import{query as e,queryAll as s,state as r,property as h,customElement as l}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{d}from"../internal/default-value.esm.js";import{F as u,v as c}from"../internal/form.esm.js";import{H as p}from"../internal/slot.esm.js";import{w as m}from"../internal/watch.esm.js";import{N as f}from"../internal/nile-element.esm.js";import{N as v,K as b}from"../internal/enum.esm.js";import{s as g}from"./nile-otp-input.css.esm.js";import{O as y,a as $,b as C,c as x,d as _}from"./nile-otp-input.enum.esm.js";import"../nile-form-help-text/nile-form-help-text.esm.js";import"../nile-form-error-message/nile-form-error-message.esm.js";import"../nile-form-help-text/nile-form-help-text.css.esm.js";import"../nile-form-error-message/nile-form-error-message.css.esm.js";let j=class extends f{constructor(){super(...arguments),this.formControlController=new u(this,{assumeInteractionOn:[v.NILE_BLUR,v.NILE_INPUT]}),this.hasSlotController=new p(this,"help-text","label"),this.customValidationMessage="",this.wasComplete=!1,this.hasFocus=!1,this.activeIndex=-1,this.cells=this.createCells(""),this.name="",this.value="",this.defaultValue="",this.length=6,this.numericOnly=!0,this.alphanumeric=!1,this.label="",this.helpText="",this.errorMessage="",this.placeholder="",this.separator="",this.separatorEvery=0,this.separatorPositions="",this.masked=!1,this.warning=!1,this.error=!1,this.success=!1,this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.autofocus=!1,this.autocomplete=y.ONE_TIME_CODE}connectedCallback(){super.connectedCallback(),this.emit(v.NILE_INIT)}disconnectedCallback(){super.disconnectedCallback(),this.emit(v.NILE_DESTROY)}firstUpdated(){const t=this.normalizeValue(this.value);t===this.value?(this.syncCellsFromValue(t),this.wasComplete=this.isComplete(t),this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity(),this.autofocus&&this.focus()):this.value=t}get validity(){return this.valueInput?.validity??c}get validationMessage(){return this.valueInput?.validationMessage??""}get complete(){return this.isComplete(this.value)}getNormalizedLength(){const t=Number.isFinite(this.length)?Math.trunc(this.length):6;return Math.max(4,t)}isNumericMode(){return this.numericOnly&&!this.alphanumeric}getResolvedInputMode(){return this.inputmode??(this.isNumericMode()?$.NUMERIC:$.TEXT)}getValidationPattern(){if(this.pattern)return this.pattern;const t=this.getNormalizedLength();return this.isNumericMode()?`[0-9]{${t}}`:`[A-Za-z0-9]{${t}}`}isAllowedCharacter(t){return this.isNumericMode()?/^[0-9]$/.test(t):/^[A-Za-z0-9]$/.test(t)}toOtpCharacters(t){return Array.from(t??"").filter((t=>this.isAllowedCharacter(t)))}normalizeValue(t){return this.toOtpCharacters(t??"").slice(0,this.getNormalizedLength()).join("")}createCells(t){const i=this.getNormalizedLength(),e=this.toOtpCharacters(t).slice(0,i);return Array.from({length:i},((t,i)=>e[i]??""))}syncCellsFromValue(t){this.cells=this.createCells(t)}isComplete(t){return t.length===this.getNormalizedLength()}getFirstEmptyIndex(){const t=this.cells.findIndex((t=>""===t));return-1===t?this.getNormalizedLength()-1:t}getSeparatorIndices(){const t=this.getNormalizedLength()-2,i=new Set;if(Number.isInteger(this.separatorEvery)&&this.separatorEvery>0)for(let e=this.separatorEvery-1;e<=t;e+=this.separatorEvery)i.add(e);return this.separatorPositions.trim().length>0&&this.separatorPositions.split(",").map((t=>Number.parseInt(t.trim(),10))).filter((i=>Number.isInteger(i)&&i>=0&&i<=t)).forEach((t=>i.add(t))),i}getCellPlaceholder(t){if(this.placeholder&&!this.cells[t])return-1===this.activeIndex?t===this.getFirstEmptyIndex()?this.placeholder:void 0:t===this.activeIndex?this.placeholder:void 0}focusCell(t,i){const e=this.cellInputs?.[t];e&&(e.focus(i),e.select())}updateCell(t,i){const e=[...this.cells];e[t]=i,this.cells=e}fillFromIndex(t,i){const e=[...this.cells];let s=t;for(const t of i){if(s>=e.length)break;e[s]=t,s+=1}return this.cells=e,s}commitUserValueUpdate(){const t=this.value,i=this.cells.join(""),e=this.isComplete(i);this.value=i,this.valueInput.value=i,this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity(),this.emit(v.NILE_INPUT,{value:i,complete:e}),t!==i&&this.emit(v.NILE_CHANGE,{value:i,complete:e}),e&&!this.wasComplete&&this.emit(v.NILE_COMPLETE,{value:i}),this.wasComplete=e}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleCellFocus(t){const i=t.target,e=Number(i.dataset.index??-1),s=this.getFirstEmptyIndex();e>s||e<s&&!this.cells[e]?this.focusCell(s):(this.activeIndex=e,i.select(),this.hasFocus||(this.hasFocus=!0,this.emit(v.NILE_FOCUS,{value:this.value})))}handleCellBlur(){queueMicrotask((()=>{const t=this.shadowRoot?.activeElement;!(t instanceof HTMLInputElement&&t.classList.contains("otp__cell"))&&this.hasFocus&&(this.hasFocus=!1,this.activeIndex=-1,this.emit(v.NILE_BLUR,{value:this.value}))}))}handleCellInput(t){const i=t.target,e=Number(i.dataset.index??0);if(this.disabled||this.readonly)return void(i.value=this.cells[e]??"");const s=this.toOtpCharacters(i.value);if(0===s.length)return this.updateCell(e,""),void this.commitUserValueUpdate();if(1===s.length){this.updateCell(e,s[0]),this.commitUserValueUpdate();const t=this.getFirstEmptyIndex();return void this.focusCell(t)}this.fillFromIndex(e,s),this.commitUserValueUpdate();const r=this.getFirstEmptyIndex();this.focusCell(r)}handleCellPaste(t){if(this.disabled||this.readonly)return;const i=t.clipboardData?.getData("text")??"",e=this.toOtpCharacters(i);if(!e.length)return;t.preventDefault(),this.fillFromIndex(0,e),this.commitUserValueUpdate();const s=this.getFirstEmptyIndex();this.focusCell(s),this.emit(v.NILE_PASTE,{value:this.value})}handleCellKeyDown(t){const i=t.metaKey||t.ctrlKey||t.altKey,e=t.target,s=Number(e.dataset.index??0);if(t.key===b.ENTER&&!i&&!t.shiftKey)return void setTimeout((()=>{t.defaultPrevented||t.isComposing||this.formControlController.submit()}));if(this.disabled||this.readonly)return;if(t.key===b.BACKSPACE||t.key===b.DELETE||t.key===b.ARROW_LEFT||t.key===b.ARROW_RIGHT||t.key===b.HOME||t.key===b.END||t.key===b.SPACE||1===t.key.length&&!i){if(t.preventDefault(),t.key===b.BACKSPACE)return this.cells[s]?(this.updateCell(s,""),this.commitUserValueUpdate(),void(s>0&&this.focusCell(s-1))):void(s>0&&(this.updateCell(s-1,""),this.commitUserValueUpdate(),this.focusCell(s-1)));if(t.key!==b.DELETE)if(t.key!==b.ARROW_LEFT)if(t.key!==b.ARROW_RIGHT)if(t.key!==b.HOME)if(t.key!==b.END){if(t.key!==b.SPACE&&1===t.key.length&&!i&&this.isAllowedCharacter(t.key)){this.updateCell(s,t.key),this.commitUserValueUpdate();const i=this.getFirstEmptyIndex();this.focusCell(i)}}else this.focusCell(this.getFirstEmptyIndex());else this.focusCell(0);else{s<this.getFirstEmptyIndex()&&this.focusCell(s+1)}else s>0&&this.focusCell(s-1);else this.cells[s]&&(this.updateCell(s,""),this.commitUserValueUpdate())}}handleLengthChange(){const t=this.getNormalizedLength();if(this.length!==t)return void(this.length=t);const i=this.normalizeValue(this.value);this.syncCellsFromValue(i),i===this.value?(this.wasComplete=this.isComplete(i),this.valueInput.value=i,this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity()):this.value=i}handleValueChange(){const t=this.normalizeValue(this.value);t===this.value?(this.syncCellsFromValue(t),this.wasComplete=this.isComplete(t),this.valueInput.value=t,this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity()):this.value=t}handleDisabledChange(){this.disabled?(this.hasFocus=!1,this.activeIndex=-1,this.formControlController.setValidity(!0)):this.formControlController.updateValidity()}handleNumericOnlyChange(){const t=this.normalizeValue(this.value);t===this.value?(this.syncCellsFromValue(t),this.wasComplete=this.isComplete(t),this.valueInput.value=t,this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity()):this.value=t}handlePatternChange(){this.valueInput.setCustomValidity(this.customValidationMessage),this.formControlController.updateValidity()}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(t){this.customValidationMessage=t,this.valueInput&&this.valueInput.setCustomValidity(t),this.formControlController.updateValidity()}focus(t){this.focusCell(this.getFirstEmptyIndex(),t)}blur(){const t=this.shadowRoot?.activeElement;t instanceof HTMLElement&&t.blur()}clear(){this.disabled||this.readonly||(this.cells=Array.from({length:this.getNormalizedLength()},(()=>"")),this.commitUserValueUpdate(),this.focusCell(0))}render(){const t=this.getNormalizedLength(),e=this.getSeparatorIndices(),s=this.hasSlotController.test("label"),r=this.hasSlotController.test("help-text"),h=Boolean(this.label||s),l=Boolean(this.helpText||r),d=Boolean(this.errorMessage),u=[l?"help-text":"",d?"error-message":""].filter(Boolean).join(" ");return i`
+      <div
+        part="form-control"
+        class=${a({"form-control":!0,"form-control--has-label":h})}
+      >
+        <label
+          id="label"
+          part="form-control-label"
+          class="form-control__label"
+          aria-hidden=${h?"false":"true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div
+            part="base"
+            class=${a({otp:!0,"otp--warning":this.warning,"otp--error":this.error,"otp--success":this.success,"otp--disabled":this.disabled,"otp--readonly":this.readonly})}
+            role="group"
+            aria-labelledby=${o(h?"label":void 0)}
+            aria-label=${o(h?void 0:"One-time password")}
+            aria-describedby=${o(u||void 0)}
+            aria-disabled=${this.disabled?"true":"false"}
+          >
+            ${Array.from({length:t},((s,r)=>{const h=this.cells[r]??"";return i`
+                <input
+                  part="cell"
+                  class=${a({otp__cell:!0,"otp__cell--active":this.activeIndex===r})}
+                  data-index=${r}
+                  type=${this.masked&&h&&this.activeIndex!==r?C.PASSWORD:C.TEXT}
+                  maxlength="1"
+                  .value=${n(h)}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  placeholder=${o(this.getCellPlaceholder(r))}
+                  inputmode=${o(this.getResolvedInputMode())}
+                  pattern=${this.isNumericMode()?x.NUMERIC:x.ALPHANUMERIC}
+                  autocapitalize="none"
+                  autocorrect="off"
+                  spellcheck="false"
+                  autocomplete=${0===r?this.autocomplete:y.OFF}
+                  enterkeyhint=${r===t-1?_.DONE:_.NEXT}
+                  aria-label=${`Digit ${r+1} of ${t}`}
+                  aria-describedby=${o(u||void 0)}
+                  aria-invalid=${this.hasAttribute("data-user-invalid")?"true":"false"}
+                  @focus=${this.handleCellFocus}
+                  @blur=${this.handleCellBlur}
+                  @keydown=${this.handleCellKeyDown}
+                  @input=${this.handleCellInput}
+                  @paste=${this.handleCellPaste}
+                />
+                ${this.separator&&e.has(r)?i`
+                      <span
+                        class="otp__separator"
+                        part="separator"
+                        aria-hidden="true"
+                      >
+                        ${this.separator}
+                      </span>
+                    `:""}
+              `}))}
+
+            <input
+              class="otp__value-input"
+              type="text"
+              .value=${n(this.value)}
+              ?required=${this.required}
+              ?disabled=${this.disabled}
+              minlength=${t}
+              maxlength=${t}
+              pattern=${this.getValidationPattern()}
+              tabindex="-1"
+              aria-hidden="true"
+              @focus=${()=>this.focus()}
+              @invalid=${this.handleInvalid}
+            />
+          </div>
+        </div>
+
+        ${l?i`
+              <div
+                id="help-text"
+                part="form-control-help-text"
+                class="form-control__help-text"
+              >
+                <nile-form-help-text>
+                  <slot name="help-text">${this.helpText}</slot>
+                </nile-form-help-text>
+              </div>
+            `:""}
+        ${d?i`
+              <div
+                id="error-message"
+                part="form-control-error-message"
+                class="form-control__error-message"
+              >
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              </div>
+            `:""}
+      </div>
+    `}};j.styles=g,t([e(".otp__value-input")],j.prototype,"valueInput",void 0),t([s(".otp__cell")],j.prototype,"cellInputs",void 0),t([r()],j.prototype,"hasFocus",void 0),t([r()],j.prototype,"activeIndex",void 0),t([r()],j.prototype,"cells",void 0),t([h({reflect:!0,type:String,attribute:!0})],j.prototype,"name",void 0),t([h({reflect:!0,type:String,attribute:!0})],j.prototype,"value",void 0),t([d()],j.prototype,"defaultValue",void 0),t([h({type:Number,reflect:!0,attribute:!0})],j.prototype,"length",void 0),t([h({type:Boolean,reflect:!0,attribute:!0})],j.prototype,"numericOnly",void 0),t([h({type:Boolean,reflect:!0,attribute:!0})],j.prototype,"alphanumeric",void 0),t([h({reflect:!0,attribute:!0,type:String})],j.prototype,"label",void 0),t([h({attribute:!0,reflect:!0,type:String})],j.prototype,"helpText",void 0),t([h({attribute:!0,reflect:!0,type:String})],j.prototype,"errorMessage",void 0),t([h({reflect:!0,attribute:!0,type:String})],j.prototype,"placeholder",void 0),t([h({reflect:!0,type:String})],j.prototype,"separator",void 0),t([h({type:Number,attribute:!0,reflect:!0})],j.prototype,"separatorEvery",void 0),t([h({attribute:"separator-positions",type:String,reflect:!0})],j.prototype,"separatorPositions",void 0),t([h({type:Boolean,reflect:!0})],j.prototype,"masked",void 0),t([h({type:Boolean,attribute:!0,reflect:!0})],j.prototype,"warning",void 0),t([h({type:Boolean,attribute:!0,reflect:!0})],j.prototype,"error",void 0),t([h({type:Boolean,attribute:!0,reflect:!0})],j.prototype,"success",void 0),t([h({type:Boolean,reflect:!0,attribute:!0})],j.prototype,"disabled",void 0),t([h({type:Boolean,attribute:!0,reflect:!0})],j.prototype,"readonly",void 0),t([h({reflect:!0,attribute:!0,type:String})],j.prototype,"form",void 0),t([h({type:Boolean,reflect:!0,attribute:!0})],j.prototype,"required",void 0),t([h({reflect:!0,attribute:!0,type:String})],j.prototype,"pattern",void 0),t([h({type:Boolean,reflect:!0,attribute:!0})],j.prototype,"autofocus",void 0),t([h({reflect:!0,attribute:!0,type:String})],j.prototype,"inputmode",void 0),t([h({reflect:!0,type:String})],j.prototype,"autocomplete",void 0),t([m("length",{waitUntilFirstUpdate:!0})],j.prototype,"handleLengthChange",null),t([m("value",{waitUntilFirstUpdate:!0})],j.prototype,"handleValueChange",null),t([m("disabled",{waitUntilFirstUpdate:!0})],j.prototype,"handleDisabledChange",null),t([m("numericOnly",{waitUntilFirstUpdate:!0})],j.prototype,"handleNumericOnlyChange",null),t([m("pattern",{waitUntilFirstUpdate:!0})],j.prototype,"handlePatternChange",null),j=t([l("nile-otp-input")],j);export{j as N};