@unlk/keymaster 1.6.7 → 1.6.8

package/dist/js/keymaster.js

@@ -1,5 +1,5 @@
 /*!
-  * Unlock Keymaster v1.6.7 (https://keymaster.unlock.com)
+  * Unlock Keymaster v1.6.8 (https://keymaster.unlock.com)
   * Copyright 2022-2026 Unlk Developers
   */
 (function (global, factory) {
@@ -7459,16 +7459,16 @@
 	  }
 	}
 
-	const NAME$2 = 'datepicker';
-	const DATA_KEY = 'bs.datepicker';
-	const EVENT_KEY = `.${DATA_KEY}`;
+	const NAME$3 = 'datepicker';
+	const DATA_KEY$1 = 'bs.datepicker';
+	const EVENT_KEY$1 = `.${DATA_KEY$1}`;
 	const DATA_API_KEY = '.data-api';
-	const SELECTOR_INPUT = '[data-bs-toggle="datepicker"]';
-	const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`;
+	const SELECTOR_INPUT$1 = '[data-bs-toggle="datepicker"]';
+	const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY$1}${DATA_API_KEY}`;
 	class Datepicker extends BaseComponent {
 	  // Getters
 	  static get NAME() {
-	    return NAME$2;
+	    return NAME$3;
 	  }
 
 	  // Static
@@ -7485,8 +7485,8 @@
 	/**
 	 * Data API implementation
 	 */
-	EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_INPUT, event => {
-	  const input = event.target.closest(SELECTOR_INPUT);
+	EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_INPUT$1, event => {
+	  const input = event.target.closest(SELECTOR_INPUT$1);
 	  if (isTouchDevice()) {
 	    const datePicker = input.cloneNode(true);
 	    datePicker.type = 'date';
@@ -7676,7 +7676,7 @@
 	  }
 	});
 
-	const NAME$1 = 'videoModal';
+	const NAME$2 = 'videoModal';
 	const EVENT_SHOW = 'show.bs.modal';
 	const EVENT_HIDDEN = 'hidden.bs.modal';
 	const SELECTOR_MODAL = '.modal';
@@ -7794,7 +7794,7 @@
 	    return match ? match[1] : '';
 	  }
 	  static get NAME() {
-	    return NAME$1;
+	    return NAME$2;
 	  }
 	  static jQueryInterface(config) {
 	    return this.each(function () {
@@ -7812,7 +7812,7 @@
 	});
 	defineJQueryPlugin(VideoModal);
 
-	const NAME = 'accordionScroll';
+	const NAME$1 = 'accordionScroll';
 	const EVENT_SHOWN = 'shown.bs.collapse';
 	const SELECTOR_ACCORDION = '.accordion';
 	const SELECTOR_ITEM = '.accordion-item';
@@ -7832,7 +7832,7 @@
 	    }
 	  }
 	  static get NAME() {
-	    return NAME;
+	    return NAME$1;
 	  }
 	  static jQueryInterface(config) {
 	    return this.each(function () {
@@ -7845,6 +7845,175 @@
 	});
 	defineJQueryPlugin(AccordionScroll);
 
+	const NAME = 'otpInput';
+	const DATA_KEY = 'bs.otpInput';
+	const EVENT_KEY = `.${DATA_KEY}`;
+	const EVENT_INPUT = `input${EVENT_KEY}`;
+	const EVENT_COMPLETE = `complete${EVENT_KEY}`;
+	const SELECTOR_OTP = '[data-bs-otp]';
+	const SELECTOR_INPUT = '.otp-input';
+	const CLASS_SLOTS = 'otp-slots';
+	const CLASS_GROUP = 'otp-group';
+	const CLASS_SLOT = 'otp-slot';
+	const CLASS_CHAR = 'otp-char';
+	const CLASS_CURSOR = 'otp-cursor';
+	const CLASS_SEPARATOR = 'otp-separator';
+	const CLASS_SLOT_ACTIVE = 'otp-slot-active';
+	const CLASS_SLOT_FILLED = 'otp-slot-filled';
+	const CLASS_DISABLED = 'disabled';
+	const PATTERNS = {
+	  numeric: /\D/g,
+	  alpha: /[^a-zA-Z]/g,
+	  alphanumeric: /[^a-zA-Z0-9]/g
+	};
+	const INPUT_PATTERNS = {
+	  numeric: '[0-9]',
+	  alpha: '[a-zA-Z]',
+	  alphanumeric: '[a-zA-Z0-9]'
+	};
+	class OtpInput extends BaseComponent {
+	  constructor(element, config) {
+	    super(element, config);
+	    this._input = SelectorEngine.findOne(SELECTOR_INPUT, this._element);
+	    if (!this._input) return;
+	    this._length = this._input.maxLength > 0 ? this._input.maxLength : 6;
+	    this._type = this._element.dataset.bsType || 'numeric';
+	    const charPattern = INPUT_PATTERNS[this._type] || INPUT_PATTERNS.numeric;
+	    this._input.pattern = `${charPattern}{${this._length}}`;
+	    this._mask = this._element.dataset.bsMask === 'true';
+	    this._groups = this._element.dataset.bsGroups ? String(this._element.dataset.bsGroups).split(',').map(Number) : [this._length];
+	    this._slots = [];
+	    this._buildSlots();
+	    this._bindEvents();
+	    this._render();
+	  }
+
+	  // Public API
+
+	  getValue() {
+	    return this._input.value;
+	  }
+	  setValue(value) {
+	    const pattern = PATTERNS[this._type] || PATTERNS.numeric;
+	    this._input.value = String(value).replace(pattern, '').slice(0, this._length);
+	    this._render();
+	  }
+	  clear() {
+	    this._input.value = '';
+	    this._render();
+	    this._input.focus();
+	  }
+
+	  // Private
+
+	  _buildSlots() {
+	    // Hide real input visually but keep it accessible
+	    this._input.style.cssText = 'position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden;white-space:nowrap;';
+	    const slotsWrapper = document.createElement('div');
+	    slotsWrapper.classList.add(CLASS_SLOTS);
+	    slotsWrapper.setAttribute('aria-hidden', 'true');
+	    let slotIndex = 0;
+	    for (const [gi, groupLen] of this._groups.entries()) {
+	      const groupEl = document.createElement('div');
+	      groupEl.classList.add(CLASS_GROUP);
+	      for (let i = 0; i < groupLen; i++) {
+	        const slot = document.createElement('div');
+	        slot.classList.add(CLASS_SLOT);
+	        slot.dataset.index = slotIndex;
+	        const char = document.createElement('span');
+	        char.classList.add(CLASS_CHAR);
+	        const cursor = document.createElement('span');
+	        cursor.classList.add(CLASS_CURSOR);
+	        slot.append(char, cursor);
+	        groupEl.append(slot);
+	        this._slots.push({
+	          slot,
+	          char
+	        });
+	        slotIndex++;
+	      }
+	      slotsWrapper.append(groupEl);
+	      if (gi < this._groups.length - 1) {
+	        const sep = document.createElement('span');
+	        sep.classList.add(CLASS_SEPARATOR);
+	        sep.textContent = '–';
+	        slotsWrapper.append(sep);
+	      }
+	    }
+	    this._element.append(slotsWrapper);
+	    this._slotsWrapper = slotsWrapper;
+	  }
+	  _bindEvents() {
+	    EventHandler.on(this._slotsWrapper, 'click', () => {
+	      if (this._input.disabled) return;
+	      this._input.focus();
+	      const len = this._input.value.length;
+	      this._input.setSelectionRange(len, len);
+	    });
+	    EventHandler.on(this._input, 'focus', () => this._render());
+	    EventHandler.on(this._input, 'blur', () => this._render());
+	    EventHandler.on(this._input, 'input', () => {
+	      const pattern = PATTERNS[this._type] || PATTERNS.numeric;
+	      this._input.value = this._input.value.replace(pattern, '').slice(0, this._length);
+	      this._render();
+	      EventHandler.trigger(this._element, EVENT_INPUT, {
+	        value: this._input.value
+	      });
+	      if (this._input.value.length === this._length) {
+	        EventHandler.trigger(this._element, EVENT_COMPLETE, {
+	          value: this._input.value
+	        });
+	      }
+	    });
+	    EventHandler.on(this._input, 'keydown', e => {
+	      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+	        requestAnimationFrame(() => this._render());
+	      }
+	    });
+	  }
+	  _render() {
+	    const val = this._input.value;
+	    const focused = document.activeElement === this._input;
+	    const activeIdx = focused ? Math.min(val.length, this._length - 1) : -1;
+	    const isDisabled = this._input.disabled;
+	    this._slotsWrapper.classList.toggle(CLASS_DISABLED, isDisabled);
+	    for (const [i, {
+	      slot,
+	      char
+	    }] of this._slots.entries()) {
+	      const ch = val[i] || '';
+	      char.textContent = this._mask && ch ? '•' : ch;
+	      slot.classList.toggle(CLASS_SLOT_ACTIVE, i === activeIdx && !isDisabled);
+	      slot.classList.toggle(CLASS_SLOT_FILLED, Boolean(ch));
+	    }
+	  }
+
+	  // Static
+
+	  static get NAME() {
+	    return NAME;
+	  }
+	  static jQueryInterface(config, ...args) {
+	    return this.each(function () {
+	      const data = OtpInput.getOrCreateInstance(this);
+	      if (typeof config === 'string') {
+	        if (typeof data[config] === 'undefined') {
+	          throw new TypeError(`No method named "${config}"`);
+	        }
+	        data[config](...args);
+	      }
+	    });
+	  }
+	}
+
+	// Auto-init on DOMContentLoaded
+	EventHandler.on(globalThis, 'load', () => {
+	  for (const el of SelectorEngine.find(SELECTOR_OTP)) {
+	    OtpInput.getOrCreateInstance(el);
+	  }
+	});
+	defineJQueryPlugin(OtpInput);
+
 	exports.AccordionScroll = AccordionScroll;
 	exports.Alert = alert;
 	exports.Button = button;
@@ -7856,6 +8025,7 @@
 	exports.Dropdown = dropdown;
 	exports.Modal = modal;
 	exports.Offcanvas = offcanvas;
+	exports.OtpInput = OtpInput;
 	exports.Popover = popover;
 	exports.Scrollspy = scrollspy;
 	exports.Tab = tab;