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

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "mds-input-range-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,49 @@
+{
+  "name": "@maggioli-design-system/mds-input-range",
+  "version": "1.0.1",
+  "description": "mds-input-range 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-range/mds-input-range.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/styles": "14.3.2",
+    "@maggioli-design-system/mds-text": "4.3.6",
+    "@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": "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,53 @@
+# mds-input-range
+
+
+
+This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                                                                      | Type     | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
+| `max`    | `max`     | The greatest value in the range of permitted values                                                                                              | `number` | `100`       |
+| `min`    | `min`     | The lowest value in the range of permitted values                                                                                                | `number` | `0`         |
+| `step`   | `step`    | The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. | `number` | `1`         |
+| `value`  | `value`   | The value attribute contains a number which contains a representation of the selected number.                                                    | `number` | `undefined` |
+
+
+## Events
+
+| Event                 | Description                           | Type                  |
+| --------------------- | ------------------------------------- | --------------------- |
+| `mdsInputRangeChange` | Emits when the input range is changed | `CustomEvent<number>` |
+
+
+## CSS Custom Properties
+
+| Name                                          | Description                                      |
+| --------------------------------------------- | ------------------------------------------------ |
+| `--mds-input-range-thumb-background`          |                                                  |
+| `--mds-input-range-thumb-size`                | Sets the thumb width and height of the component |
+| `--mds-input-range-track-background`          |                                                  |
+| `--mds-input-range-track-progress-background` |                                                  |
+| `--mds-input-range-track-size`                |                                                  |
+
+
+## Dependencies
+
+### Depends on
+
+- [mds-text](../mds-text)
+
+### Graph
+```mermaid
+graph TD;
+  mds-input-range --> mds-text
+  style mds-input-range 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/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-range/.gitlab-ci.yml

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

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

@@ -0,0 +1,109 @@
+@import '~@maggioli-design-system/styles/dist/css/animations.css';
+@import '../../tailwind/components.css';
+@tailwind components;
+@tailwind utilities;
+
+/**
+  * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component
+  * @prop --mds-input-range-thumb-background:
+  * @prop --mds-input-range-track-background:
+  * @prop --mds-input-range-track-size:
+  * @prop --mds-input-range-track-progress-background:
+  */
+
+:host {
+
+  --mds-input-range-thumb-size: theme('spacing.400');
+  --mds-input-range-thumb-background: theme('colors.brand-maggioli-03');
+  --mds-input-range-track-background: theme('colors.tone-neutral-09');
+  --mds-input-range-track-size: theme('spacing.200');
+  --mds-input-range-track-progress-background: var(--mds-input-range-thumb-background);
+
+  @apply gap-100;
+
+  display: grid;
+}
+
+.header {
+  @apply gap-200;
+
+  display: flex;
+}
+
+.label {
+  @apply
+    min-w-0
+    truncate;
+}
+
+.value {
+  margin-left: auto;
+}
+
+.range {
+  align-items: center;
+  display: flex;
+  height: var(--mds-input-range-thumb-size);
+  position: relative;
+}
+
+.track {
+  @apply w-full;
+
+  --margin: calc(var(--mds-input-range-track-size) / 2);
+
+  box-sizing: border-box;
+  padding: 0 var(--margin);
+  position: absolute;
+}
+
+.field {
+  @apply
+    focus-bounce
+    h-400
+    z-20;
+
+  appearance: none;
+  background-color: transparent;
+  border-radius: 1000px;
+  flex-grow: 1;
+  margin: 0;
+}
+
+.field:focus-visible {
+  @apply focus-bounce--focused;
+}
+
+.field::-webkit-slider-thumb {
+  appearance: none;
+  background-color: var(--mds-input-range-thumb-background);
+  border: 0;
+  border-radius: var(--mds-input-range-thumb-size);
+  cursor: pointer;
+  height: var(--mds-input-range-thumb-size);
+  line-height: 0;
+  transform: translate(0, -50%);
+  width: var(--mds-input-range-thumb-size);
+}
+
+.field::-webkit-slider-runnable-track {
+  appearance: none;
+  border: 0;
+  height: 0;
+  width: 100%;
+}
+
+.track-progress {
+  background-color: var(--mds-input-range-track-progress-background);
+  display: flex;
+  height: var(--mds-input-range-track-size);
+}
+
+.track-total {
+  background-color: var(--mds-input-range-track-background);
+  border-radius: var(--mds-input-range-track-size);
+  display: flex;
+  height: var(--mds-input-range-track-size);
+  overflow: hidden;
+  width: 100%;
+}