@maggioli-design-system/mds-input-tip 1.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@maggioli-design-system/mds-input-tip",
+  "version": "1.0.0",
+  "description": "mds-input-tip is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/mds-input-tip/mds-input-tip.esm.js",
+  "files": [
+    "dist/",
+    "documentation.json",
+    "loader/",
+    "readme.md",
+    "src/",
+    "www/"
+  ],
+  "scripts": {
+    "build": "rm src/components.d.ts || true && stencil build --docs-readme",
+    "prepublishOnly": "npm run build",
+    "test": "stencil test --spec --e2e"
+  },
+  "dependencies": {
+    "@maggioli-design-system/mds-input-tip-item": "1.0.0",
+    "@maggioli-design-system/styles": "14.3.2",
+    "@stencil/core": "4.10.0"
+},
+  "license": "MIT",
+  "author": {
+    "name": "Vittorio Vittori",
+    "email": "vittorio.vittori@maggioli.it",
+    "url": "https://vitto.github.io/vit.to/"
+},
+  "contributors": [
+    {
+        "name": "Andrea Pruccoli",
+        "email": "andrea.pruccoli@maggioli.it",
+        "role": "Software Engineer"
+    },
+    {
+        "name": "Daniele Tardia",
+        "email": "daniele.tardia@hibo.it",
+        "role": "Senior Developer"
+    },
+    {
+        "name": "Nicola Tamburini",
+        "email": "nicola.tamburini@maggioli.it",
+        "role": "Software Engineer"
+    },
+    {
+        "name": "Vittorio Vittori",
+        "email": "vittorio.vittori@maggioli.it",
+        "role": "Product Designer"
+    }
+]
+}

package/readme.md

@@ -0,0 +1,33 @@
+# mds-input-tip
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                     | Type                             | Default |
+| ---------- | ---------- | --------------------------------------------------------------- | -------------------------------- | ------- |
+| `active`   | `active`   | Specifies the position of the element relative to its container | `boolean \| undefined`           | `false` |
+| `position` | `position` | Specifies the position of the element relative to its container | `"bottom" \| "top" \| undefined` | `'top'` |
+
+
+## Dependencies
+
+### Used by
+
+ - [mds-input](../mds-input)
+ - [mds-input-select](../mds-input-select)
+
+### Graph
+```mermaid
+graph TD;
+  mds-input --> mds-input-tip
+  mds-input-select --> mds-input-tip
+  style mds-input-tip fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+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/common/aria.ts

@@ -0,0 +1,39 @@
+const hash = (s: string): string => {
+  let i: number, h: number
+  for (i = 0, h = 0; i < s.length; i ++) {
+    h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  }
+  return h.toString()
+}
+
+const randomInt = (max: number): number => Math.floor(Math.random() * max)
+
+const unslugName = (name: string): string => {
+  return name.split('/')?.slice(-1).pop()?.replace(/-/g, ' ') ?? name
+}
+
+const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
+  if (element.hasAttribute(attribute)) {
+    return element.getAttribute(attribute) ?? ''
+  }
+  element.setAttribute(attribute, value)
+  return value
+}
+
+const hashValue = (value: string): string => `${value}-${hash(value)}`
+
+const hashRandomValue = (value?: string): string => {
+  const randomValue = randomInt(1000000)
+  if (value) {
+    return `${value}-${hash(randomValue.toString())}`
+  }
+
+  return hash(randomValue.toString())
+}
+
+export {
+  unslugName,
+  setAttributeIfEmpty,
+  hashRandomValue,
+  hashValue,
+}

package/src/common/file.ts

@@ -0,0 +1,63 @@
+import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
+import { fileFormatsVariant } from '@type/variant-file-format'
+
+interface FileFormatsVariants {
+  color: string
+  icon: string
+  iconBackground: string
+  variant: string
+}
+
+const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {
+  if (filename === undefined ) {
+    throw console.error(error)
+  }
+  if (filename.includes('/')) {
+    return filename.split('/').pop() ?? ''
+  }
+  return filename
+}
+
+const sanitizeSuffix = (rawFilename: string) => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.').pop() ?? ''
+  }
+  return filename
+}
+
+const getName = (rawFilename: string): string => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.')[0] ?? ''
+  }
+  return filename
+}
+
+const getSuffix = (rawFilename: string, suffixOverride?: string): string => {
+  const suffix = sanitizeSuffix(rawFilename)
+  const filename = sanitizeFilename(rawFilename)
+  if (suffixOverride !== null && suffixOverride !== undefined) {
+    return suffixOverride.toLowerCase()
+  }
+  if (suffix !== filename) {
+    return suffix
+  }
+  return 'default'
+}
+
+const getExtensionInfos = (rawFilename: string, suffixOverride?: string): ExtensionInfo => {
+  const suffix = getSuffix(rawFilename, suffixOverride).toLocaleLowerCase()
+  return fileExtensionsDictionary[suffix] ?? fileExtensionsDictionary.default
+}
+
+const getFormatsVariant = (rawFilename: string, suffixOverride?: string): FileFormatsVariants => {
+  return fileFormatsVariant[getExtensionInfos(rawFilename, suffixOverride).format]
+}
+
+export {
+  getExtensionInfos,
+  getFormatsVariant,
+  getSuffix,
+  getName,
+}

package/src/common/icon.ts

@@ -0,0 +1,25 @@
+const BASE64_SVG_ICON = 'data:image/svg+xml;base64,'
+const MARKUP_SVG_ICON = '<svg '
+
+const isIconFormatIsBase64 = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(BASE64_SVG_ICON)
+}
+
+const isIconFormatIsSVG = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(MARKUP_SVG_ICON)
+}
+
+
+
+export {
+  isIconFormatIsBase64,
+  isIconFormatIsSVG,
+  BASE64_SVG_ICON,
+  MARKUP_SVG_ICON,
+}

package/src/common/keyboard-manager.ts

@@ -0,0 +1,50 @@
+export class KeyboardManager {
+  private escapeCallback: () => void
+  private elements = new Map<string, HTMLElement>()
+
+  private handleClickBehaviorDispatchEvent = (event: KeyboardEvent): void => {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      (event.target as HTMLElement).click()
+    }
+  }
+
+  private handleEscapeBehaviorDispatchEvent = (event: KeyboardEvent): void => {
+    if (event.code === 'Escape' && this.escapeCallback) {
+      this.escapeCallback()
+    }
+  }
+
+  addElement = (el: HTMLElement, name = 'element'): void => {
+    if (!el) {
+      throw Error(`Passed an ${el} element parameter to KeyboardManager.addElement`)
+    }
+    this.elements.set(name, el)
+  }
+
+  removeElement = (name: string = 'element'): void => {
+    this.detachClickBehavior(name)
+    this.elements.delete(name)
+  }
+
+  attachClickBehavior = (name = 'element'): void => {
+    this.elements.get(name)?.addEventListener('keydown', this.handleClickBehaviorDispatchEvent)
+  }
+
+  detachClickBehavior = (name = 'element'): void => {
+    this.elements.get(name)?.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent)
+  }
+
+  attachEscapeBehavior = (callback: () => void): void => {
+    this.escapeCallback = callback
+    if (window !== undefined) {
+      window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
+    }
+  }
+
+  detachEscapeBehavior = (): void => {
+    this.escapeCallback = () => { return }
+    if (window !== undefined) {
+      window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
+    }
+  }
+}

package/src/common/locale.ts

@@ -0,0 +1,31 @@
+type LocaleConfig = {
+  it?: Record<string, string>
+  en?: Record<string, string>
+  gr?: Record<string, string>
+}
+
+export class Locale {
+  defaultLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+
+  constructor (configData: LocaleConfig) {
+    this.config = configData
+  }
+
+  lang = (element: HTMLElement): void => {
+    const closestElement:HTMLElement = element.closest('[lang]') as HTMLElement
+    if (closestElement) {
+      if (closestElement.lang) {
+        this.language = closestElement.lang
+        return
+      }
+    }
+
+    this.language = this.defaultLanguage
+  }
+
+  get = (tag: string): string => {
+    return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+  }
+}

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-tip/.gitlab-ci.yml

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

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

@@ -0,0 +1,52 @@
+@tailwind utilities;
+
+:host {
+
+  --mds-input-tip-active-translate: translate(0, 0);
+
+  @apply
+    duration-300
+    ease-out-expo
+    gap-100
+    left-100
+    right-100
+    transition-cosmetic;
+
+  display: flex;
+  justify-content: flex-end;
+  pointer-events: none;
+  position: absolute;
+  transform: var(--mds-input-tip-active-translate);
+}
+
+:host ( :empty ) {
+  display: none;
+}
+
+:host ( [position="top"] ) {
+  top: theme('spacing.100');
+}
+
+:host ( [position="bottom"] ) {
+  bottom: theme('spacing.100');
+}
+
+:host ( [position="top"][active]:not([active="false"]) ) {
+
+  --mds-input-tip-active-translate: translate(calc(theme('translate.100') * -1), calc(theme('translate.100') * -1));
+}
+
+:host( [position="top"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+:host ( [position="bottom"][active]:not([active="false"]) ) {
+
+  --mds-input-tip-active-translate: translate(calc(theme('translate.100') * -1), theme('translate.100'));
+}
+
+:host( [position="bottom"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

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

@@ -0,0 +1,28 @@
+import { Component, Host, h, Prop } from '@stencil/core'
+import { InputTipPositionType } from './meta/types'
+
+@Component({
+  tag: 'mds-input-tip',
+  styleUrl: 'mds-input-tip.css',
+  shadow: true,
+})
+export class MdsInputTip {
+
+  /**
+   * Specifies the position of the element relative to its container
+   */
+  @Prop({ reflect: true }) readonly active?: boolean = false
+
+  /**
+   * Specifies the position of the element relative to its container
+   */
+  @Prop({ reflect: true }) readonly position?: InputTipPositionType = 'top'
+
+  render () {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    )
+  }
+}

package/src/components/mds-input-tip/meta/types.ts

@@ -0,0 +1,3 @@
+export type InputTipPositionType =
+  | 'top'
+  | 'bottom'

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

@@ -0,0 +1,18 @@
+# mds-input-tip
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                     | Type                             | Default |
+| ---------- | ---------- | --------------------------------------------------------------- | -------------------------------- | ------- |
+| `active`   | `active`   | Specifies the position of the element relative to its container | `boolean \| undefined`           | `false` |
+| `position` | `position` | Specifies the position of the element relative to its container | `"bottom" \| "top" \| undefined` | `'top'` |
+
+
+----------------------------------------------
+
+Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)