@maggioli-design-system/mds-input-otp 1.0.1

package/src/common/locale.ts

@@ -0,0 +1,90 @@
+import { render } from 'mustache'
+
+type LocaleConfig = {
+  el?: Record<string, string | string[]>
+  en: Record<string, string | string[]>
+  es?: Record<string, string | string[]>
+  it?: Record<string, string | string[]>
+}
+
+export class Locale {
+  rollbackLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+  closestElement:HTMLElement
+  element: HTMLElement
+
+  constructor (configData?: LocaleConfig) {
+    if (configData) {
+      this.set(configData)
+    }
+  }
+
+  set = (configData: LocaleConfig): void => {
+    this.config = configData
+  }
+
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
+
+    if (this.closestElement) {
+      if (this.closestElement.lang) {
+        this.language = this.closestElement.lang
+        return this.language
+      }
+    }
+
+    this.language = this.rollbackLanguage
+    return this.language
+  }
+
+  update = (doc?: Document | ShadowRoot): void => {
+    const context = doc ?? this.element.shadowRoot
+    context && context.querySelectorAll('*').forEach(el => {
+      if (el.tagName.toLowerCase().startsWith('mds-')) {
+        // eslint-disable-next-line no-restricted-syntax
+        if (el && 'updateLang' in el) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (el as any).updateLang()
+        }
+      }
+    })
+  }
+
+  private pluralize = (tag: string | string[], context: Record<string, string | number | boolean>): string => {
+
+    const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
+    const phrases: string[] = []
+
+    if (Array.isArray(languagePhrase)) {
+      phrases.push(languagePhrase[0])
+      phrases.push(languagePhrase[1])
+    } else {
+      phrases.push(languagePhrase)
+      phrases.push(languagePhrase)
+    }
+
+    const [ defaultPhrase ] = phrases
+    let translatePhrase: string = defaultPhrase
+
+    const keys = Object.keys(context)
+    if (keys.length > 0) {
+      const [firstKey] = keys
+      if (typeof context[firstKey] === 'number') {
+        if (context[firstKey] !== 1) {
+          translatePhrase = phrases[1]
+        }
+      }
+    }
+
+    return render(translatePhrase, context)
+  }
+
+  get = (tag: string | string[], context?: Record<string, string | number | boolean>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
+    return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
+  }
+}

package/src/common/slot.ts

@@ -0,0 +1,35 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
+  }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+const hasSlotted = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+  hasSlottedNodes,
+  hasSlotted,
+}

package/src/common/string.ts

@@ -0,0 +1,42 @@
+const levenshteinDistance = (a: string, b: string): number => {
+  const dp: number[][] = Array.from({ length: a.length + 1 }, (_, i) =>
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)),
+  )
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1]
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
+      }
+    }
+  }
+
+  return dp[a.length][b.length]
+}
+
+
+const closest = (input: string, validCodes: string[]): string => {
+  let [closest] = validCodes
+  let minDistance = levenshteinDistance(input, closest)
+
+  for (const code of validCodes) {
+    const distance = levenshteinDistance(input, code)
+    if (distance < minDistance) {
+      minDistance = distance
+      closest = code
+    }
+  }
+
+  return closest
+}
+
+const firstLetterUppercase = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+export {
+  closest,
+  firstLetterUppercase,
+  levenshteinDistance,
+}

package/src/common/unit.ts

@@ -0,0 +1,33 @@
+const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
+
+  if (duration.includes('ms')) {
+    return Number(duration.replace('ms', ''))
+  }
+
+  if (duration.includes('s')) {
+    return Number(duration.replace('s', '')) * 1000
+  }
+
+  return defaultValue
+}
+
+const cssSizeToNumber = (size: string, defaultValue = 0): number => {
+  if (size.includes('px')) {
+    return Number(size.replace('px', ''))
+  }
+
+  if (size.includes('rem')) {
+    return Number(size.replace('rem', '')) * 16
+  }
+
+  if (size.includes('em')) {
+    return Number(size.replace('em', '')) * 16
+  }
+
+  return defaultValue
+}
+
+export {
+  cssDurationToMilliseconds,
+  cssSizeToNumber,
+}

package/src/common/yugop/core.ts

@@ -0,0 +1,47 @@
+import { generator } from './utils/prng'
+import { strToCharCodeArray } from './utils/string'
+import { randomSign, minMaxLooped } from './utils/math'
+const rand = generator()
+
+const random: (arg0: number, arg1: number) => () => number = (
+  base,
+  offset,
+) => () => (base + rand.range(0, offset)) * randomSign()
+
+export const generateRandomCharCodeArray: (
+  arg0: number,
+  arg1: number
+) => (arg0: string) => number[] = (base, offset) => str =>
+  strToCharCodeArray(str).map(random(base, offset))
+type Options = {
+  str: string
+  minCharCode: number
+  maxCharCode: number
+  placeholderChar: string
+  charStep: number
+}
+export const charCodeArrayToString: (
+  arg0: Options
+) => (arg0: number[]) => string = ({
+  str,
+  minCharCode,
+  maxCharCode,
+  placeholderChar,
+  charStep,
+}) => charCodes =>
+  charCodes.reduce((acc, item, index) => {
+    if (item !== 0) {
+      if (Math.abs(item) > charStep) {
+        return acc + placeholderChar
+      }
+
+      return (
+        acc +
+        String.fromCharCode(
+          minMaxLooped(minCharCode, maxCharCode)(str.charCodeAt(index) + item),
+        )
+      )
+    }
+
+    return acc + str.charAt(index)
+  }, '')

package/src/common/yugop/index.ts

@@ -0,0 +1,4 @@
+// taken from https://github.com/zenoplex/random-text
+
+// @flow
+export { default } from './random-text'

package/src/common/yugop/random-text.ts

@@ -0,0 +1,95 @@
+import { generateRandomCharCodeArray, charCodeArrayToString } from './core'
+import { noop } from './utils/noop'
+
+type Options = {
+  str: string
+  speed?: number
+  placeholderChar?: string
+  frameOffset?: number
+  charOffset?: number
+  charStep?: number
+  minCharCode?: number
+  maxCharCode?: number
+  onProgress?: (arg0: string) => void
+  onComplete?: (arg0: string) => void
+}
+
+class RandomText {
+  static defaults: Options = {
+    str: '',
+    speed: 2,
+    placeholderChar: '_',
+    frameOffset: 30,
+    charOffset: 20,
+    charStep: 10,
+    minCharCode: 32,
+    maxCharCode: 122,
+    onProgress: noop,
+    onComplete: noop,
+  }
+  str: string
+  speed: number
+  placeholderChar: string
+  frameOffset: number
+  charOffset: number
+  charStep: number
+  minCharCode: number
+  maxCharCode: number
+  onProgress: (...args: Array<string>) => string
+  onComplete: (...args: Array<string>) => string
+  rafId: number // TODO: should be #rafId for private
+
+  constructor (options: Options) {
+    Object.assign(this, { ...RandomText.defaults, ...options })
+  }
+
+  start = (): void => {
+    const { frameOffset, charOffset, str, speed } = this
+    const randoms = generateRandomCharCodeArray(frameOffset, charOffset)(str)
+    this.stop()
+    this.rafId = requestAnimationFrame(() => {
+      this.step(randoms, speed, speed)
+    })
+  }
+
+  stop (): void {
+    cancelAnimationFrame(this.rafId)
+  }
+
+  step (randoms: number[], stepCount: number, speed: number): void {
+    const {
+      str,
+      charStep,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      onProgress,
+      onComplete,
+    } = this
+    const stepArray = randoms.slice(0, stepCount)
+    const steppedArray = stepArray.map(item => {
+      if (item > 0) return item - 1
+      if (item < 0) return item + 1
+      return 0
+    })
+    const output = charCodeArrayToString({
+      str,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      charStep,
+    })(steppedArray)
+    const updatedRandoms = [...steppedArray, ...randoms.slice(stepCount)]
+    onProgress(output)
+
+    if (output !== str) {
+      this.rafId = requestAnimationFrame(() => {
+        this.step(updatedRandoms, stepCount + speed, speed)
+      })
+    } else {
+      onComplete(output)
+    }
+  }
+}
+
+export default RandomText

package/src/common/yugop/utils/math.ts

@@ -0,0 +1,21 @@
+import { generator } from './prng'
+
+const rand = generator()
+export const randomSign: () => number = () =>
+  (Math.round(Math.random()) - 0.5) * 2
+export const generateRandomNumbers: (
+  arg0: number
+) => (
+  arg0: number
+) => (arg0: number) => number[] = base => charOffset => length =>
+  [...Array(length)].map(
+    () => (base + rand.range(0, charOffset)) * randomSign(),
+  )
+export const minMaxLooped: (
+  arg0: number,
+  arg1: number
+) => (arg0: number) => number = (min, max) => value => {
+  if (value > max) return min + (value - max)
+  if (value < min) return max + (value - min)
+  return value
+}

package/src/common/yugop/utils/noop.ts

@@ -0,0 +1 @@
+export const noop: (...rest: unknown[]) => unknown = () => {}

package/src/common/yugop/utils/prng.ts

@@ -0,0 +1,35 @@
+const int32 = 2147483647
+
+const gen: (arg0: number) => number = v => (v * 16807) % int32
+
+const randomFloat: (arg0: number) => number = v => gen(v) / int32
+
+const randomInt: (arg0: number) => number = v => gen(v)
+
+type Generator = (
+  _?: number
+) => {
+  random: () => number
+  randomFloat: () => number
+  range: (min: number, max: number) => number
+  rangeFloat: (min: number, max: number) => number
+}
+export const generator: Generator = (seed = 1) => {
+  let value = seed < 1 ? 1 : seed
+
+  const next: () => number = () => {
+    value = randomInt(value)
+    return value
+  }
+
+  return {
+    random: () => next(),
+    randomFloat: () => randomFloat(next()),
+    range: (min, max) => {
+      const minimum = min - 0.4999
+      const maximum = max + 0.4999
+      return Math.round(minimum + (maximum - minimum) * randomFloat(next()))
+    },
+    rangeFloat: (min, max) => min + (max - min) * randomFloat(next()),
+  }
+}

package/src/common/yugop/utils/string.ts

@@ -0,0 +1,4 @@
+// export const strToCharCodeArray: string => number[] = str => str.split('').map(item => item.charCodeAt(0));
+
+export const strToCharCodeArray: (arg0: string) => number[] = str =>
+  str.split('').map(item => item.charCodeAt(0))

package/src/components/mds-input-otp/.gitlab-ci.yml

@@ -0,0 +1,20 @@
+.base-input-otp:
+  variables:
+    COMPONENT: mds-input-otp
+
+# TEST
+input-otp-publish-test:
+  extends: [.base-stencil-publish-test, .base-input-otp]
+  dependencies: [base-stencil-build, base-isolate]
+
+# PUBLISH
+input-otp-publish:
+  extends: [.base-stencil-publish, .base-input-otp]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-otp-publish-test]
+
+# INSTALL TEST
+input-otp-install-test:
+  extends: [.base-stencil-install-test, .base-input-otp]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-otp-publish]

package/src/components/mds-input-otp/mds-input-otp.css

@@ -0,0 +1,16 @@
+:host {
+  display: inline-flex;
+  gap: theme('spacing.400');
+}
+
+.input {
+  width: theme('size.1200');
+}
+
+.input::part(field) {
+  text-align: center;
+}
+
+.input::part(tip-count) {
+  display: none;
+}

package/src/components/mds-input-otp/mds-input-otp.tsx

@@ -0,0 +1,123 @@
+import { Component, Element, AttachInternals, Host, h, Prop } from '@stencil/core'
+
+export interface MdsInputOtpInterface {
+  length?: number
+  autosubmit?: boolean
+  value?: string
+}
+
+@Component({
+  tag: 'mds-input-otp',
+  styleUrl: 'mds-input-otp.css',
+  formAssociated: true,
+  shadow: true,
+})
+export class MdsInputOtp {
+
+  @Element() private element: HTMLMdsInputOtpElement
+  @AttachInternals() internals: ElementInternals
+
+  /**
+   * Number of digits in the OTP code
+   */
+  @Prop() readonly length: number = 6
+
+  /**
+   * Automatically submits the form when the OTP code is complete
+   */
+  @Prop({ reflect: true }) readonly autosubmit: boolean = false
+
+  /**
+   * The current value of the OTP code
+   */
+  @Prop({ mutable: true, reflect: true }) value?: string = ''
+
+  private getOtpCode = (): string => {
+    const inputs = Array.from(this.element.shadowRoot!.querySelectorAll('mds-input'))
+    const otpCode = inputs.map(input => input.value).join('')
+
+    return otpCode
+  }
+
+  private setOtpDigit = (currentInput: HTMLMdsInputElement, digit: string): void => {
+    currentInput.value = digit
+
+    const otpCode = this.getOtpCode()
+    this.value = otpCode
+    this.internals.setFormValue(otpCode)
+  }
+
+  private submit = (currentInput: HTMLMdsInputElement): void => {
+    const isOtpCompleted = this.getOtpCode().length === this.length
+    currentInput.blur()
+
+    if (this.autosubmit && isOtpCompleted) {
+      this.internals.form?.requestSubmit()
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    if (e.ctrlKey) {
+      return
+    }
+
+    // e.preventDefault() must be called *outside* the ctrlKey check,
+    // otherwise the onPaste event won't be triggered correctly
+    e.preventDefault()
+
+    if (isNaN(Number(e.key))) {
+      return
+    }
+
+    const currentInput = e.target as HTMLMdsInputElement
+    this.setOtpDigit(currentInput, e.key)
+
+    const nextInput = currentInput.nextElementSibling as HTMLMdsInputElement
+
+    if (nextInput) {
+      nextInput.setFocus()
+    } else {
+      this.submit(currentInput)
+    }
+  }
+
+  private handlePaste = (e: ClipboardEvent) => {
+    e.preventDefault()
+
+    const pastedText = e.clipboardData?.getData('text')
+
+    if (isNaN(Number(pastedText))) {
+      return
+    }
+
+    const digits = pastedText?.split('') ?? []
+    let currentInput = e.target as HTMLMdsInputElement
+    for (const currentDigit of digits) {
+      this.setOtpDigit(currentInput, currentDigit)
+
+      currentInput = currentInput.nextElementSibling as HTMLMdsInputElement
+
+      if (currentInput) {
+        currentInput.setFocus()
+      } else {
+        this.submit(currentInput)
+        return
+      }
+    }
+  }
+
+  render () {
+    return (
+      <Host>
+        {Array.from({ length: this.length }).map(() => (
+          <mds-input
+            class="input"
+            maxlength={1}
+            onKeyDown={this.handleKeyDown}
+            onPaste={this.handlePaste}
+          ></mds-input>
+        ))}
+      </Host>
+    )
+  }
+}

package/src/components/mds-input-otp/readme.md

@@ -0,0 +1,19 @@
+# mds-input-otp
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                                                  | Type                  | Default |
+| ------------ | ------------ | ------------------------------------------------------------ | --------------------- | ------- |
+| `autosubmit` | `autosubmit` | Automatically submits the form when the OTP code is complete | `boolean`             | `false` |
+| `length`     | `length`     | Number of digits in the OTP code                             | `number`              | `6`     |
+| `value`      | `value`      | The current value of the OTP code                            | `string \| undefined` | `''`    |
+
+
+----------------------------------------------
+
+Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)

package/src/components/mds-input-otp/test/mds-input-otp.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing'
+
+describe('mds-input-otp', () => {
+  it('renders', async () => {
+    const page = await newE2EPage()
+    await page.setContent('<mds-input-otp></mds-input-otp>')
+
+    const element = await page.find('mds-input-otp')
+    expect(element).toHaveAttribute('hydrated')
+  })
+})