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

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "mds-input-tip-item-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@maggioli-design-system/mds-input-tip-item",
+  "version": "1.0.0",
+  "description": "mds-input-tip-item 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-item/mds-input-tip-item.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-text": "4.3.6",
+    "@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,38 @@
+# mds-input-tip-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                          | Type                                                                                  | Default      |
+| ---------- | ---------- | ------------------------------------ | ------------------------------------------------------------------------------------- | ------------ |
+| `expanded` | `expanded` | Specifies if the element is expanded | `boolean \| undefined`                                                                | `true`       |
+| `variant`  | `variant`  | Specifies the variant of the element | `"disabled" \| "readonly" \| "required" \| "required-success" \| "text" \| undefined` | `'required'` |
+
+
+## Dependencies
+
+### Used by
+
+ - [mds-input](../mds-input)
+ - [mds-input-select](../mds-input-select)
+
+### Depends on
+
+- [mds-text](../mds-text)
+
+### Graph
+```mermaid
+graph TD;
+  mds-input-tip-item --> mds-text
+  mds-input --> mds-input-tip-item
+  mds-input-select --> mds-input-tip-item
+  style mds-input-tip-item 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-item/.gitlab-ci.yml

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

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

@@ -0,0 +1,96 @@
+@import '../../tailwind/components.css';
+@tailwind components;
+@tailwind utilities;
+
+:host {
+
+  --mds-input-tip-item-background: theme('colors.tone-neutral-01');
+  --mds-input-tip-item-color: theme('colors.tone-neutral');
+  --mds-input-tip-item-icon-color: var(--tone-neutral);
+
+  @apply
+    duration-300
+    ease-out-expo
+    h-300
+    rounded-md;
+
+  align-items: center;
+  background-color: rgb(var(--mds-input-tip-item-background));
+  color: rgb(var(--mds-input-tip-item-color));
+  display: flex;
+  justify-content: center;
+  min-width: theme('spacing.300');
+  padding: 0;
+  pointer-events: none;
+  position: static;
+  text-align: center;
+  transform: translate(0, 0);
+  transition-property: background-color, border-radius, color, padding-left, padding-right, transform;
+  user-select: none;
+}
+
+:host ([expanded="false"]) {
+  color: transparent;
+}
+
+:host ([expanded]:not([expanded="false"])) {
+  @apply px-200;
+
+  --mds-input-tip-item-color: var(--tone-neutral);
+}
+
+:host ([expanded]:not([expanded="false"])) .content {
+  grid-template-columns: 1fr;
+  opacity: 1;
+}
+
+.content {
+  @apply
+    duration-200
+    ease-out-expo
+    h-300;
+
+  display: grid;
+  grid-template-columns: 0fr;
+  opacity: 0;
+  overflow: hidden;
+  transition-property: grid-template-columns, opacity;
+}
+
+.text {
+  line-height: theme('spacing.300');
+}
+
+.icon {
+  @apply
+    h-300
+    w-300;
+
+  fill: rgb(var(--mds-input-tip-item-icon-color));
+  transform: translateY(-1px);
+}
+
+:host ([variant="required"]) {
+
+  --mds-input-tip-item-background: var(--status-error-05);
+}
+
+:host ([variant="required-success"]) {
+
+  --mds-input-tip-item-background: var(--status-success-05);
+}
+
+:host ([variant="readonly"]) {
+
+  --mds-input-tip-item-background: var(--status-info-05);
+}
+
+:host ([variant="disabled"]) {
+
+  --mds-input-tip-item-background: var(--tone-neutral-05);
+}
+
+:host ([variant="text"]) {
+
+  --mds-input-tip-item-background: var(--tone-neutral-03);
+}