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

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

@@ -0,0 +1,117 @@
+import { AttachInternals, Component, Element, Event, EventEmitter, Host, h, Prop, Watch, State } from '@stencil/core'
+
+@Component({
+  tag: 'mds-input-range',
+  styleUrl: 'mds-input-range.css',
+  formAssociated: true,
+  shadow: true,
+})
+export class MdsInputRange {
+
+  @State() private progress: number
+  private inputElement: HTMLInputElement
+
+  @Element() private element: HTMLMdsInputRangeElement
+  @AttachInternals() internals: ElementInternals
+
+  /**
+   * The greatest value in the range of permitted values
+   */
+  @Prop() readonly max: number = 100
+
+  /**
+   * The lowest value in the range of permitted values
+   */
+  @Prop() readonly min: number = 0
+
+  /**
+   * 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.
+   */
+  @Prop() readonly step: number = 1
+
+  /**
+   * The value attribute contains a number which contains a representation of the selected number.
+   */
+  @Prop({ mutable: true, reflect: true }) value: number
+
+  /**
+   * Emits when the input range is changed
+   */
+  @Event({ eventName: 'mdsInputRangeChange' }) changeEvent: EventEmitter<number>
+
+  calculateProgress (): void {
+    // validate value
+    let v = parseInt(this.inputElement.value)
+    if (v > this.max) v = this.max
+    else if (v < this.min) v = this.min
+    if ((v - this.min) % (this.step) !== 0) v = Math.round(v / this.step) * this.step - this.min
+    this.value = v
+
+    this.internals.setFormValue(this.value.toString())
+    const total = this.max - this.min
+    const current = this.value - this.min
+    this.progress = current * 100 / total
+  }
+
+  private onInput = () => {
+    // trigger valueChanged that update progress and emit event
+    this.value = parseInt(this.inputElement.value)
+  }
+  @Watch('value')
+  valueChanged (): void {
+    this.inputElement.value = this.value.toString()
+    this.calculateProgress()
+    this.changeEvent.emit(this.value)
+  }
+
+  @Watch('min')
+  minChanged (): void {
+    this.calculateProgress()
+  }
+
+  @Watch('max')
+  maxChanged (): void {
+    this.calculateProgress()
+  }
+
+  @Watch('step')
+  stepChanged (): void {
+    if (this.step < 1) throw Error('step cant be negative or zero')
+    this.calculateProgress()
+  }
+
+  componentDidLoad (): void {
+    this.inputElement = this.element.shadowRoot?.querySelector('.field') as HTMLInputElement
+    this.value = parseInt(this.inputElement.value)
+    this.calculateProgress()
+  }
+
+  render () {
+    return (
+      <Host>
+        <header class="header">
+          <mds-text class="label" typography="label"><slot/></mds-text>
+          <mds-text class="value" typography="label">{ this.value }</mds-text>
+        </header>
+        <div class="range">
+          <div class="track">
+            <div class="track-total">
+              <div class="track-progress" style={{ width: `${this.progress}%` }}></div>
+            </div>
+          </div>
+          <input
+            class="field"
+            max={this.max}
+            min={this.min}
+            onInput={this.onInput}
+            step={this.step}
+            type="range"
+            value={this.value}
+          />
+        </div>
+      </Host>
+    )
+  }
+
+}

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

@@ -0,0 +1,38 @@
+# mds-input-range
+
+
+
+<!-- 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`                |                                                  |
+
+
+----------------------------------------------
+
+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-range/test/mds-input-range.e2e.ts

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

package/src/components/mds-input-range/test/mds-input-range.stories.tsx

@@ -0,0 +1,50 @@
+import { h } from '@stencil/core'
+
+export default {
+  title: 'Form / Range',
+  argTypes: {
+    min: {
+      type: { name: 'number', required: true },
+      description: 'The lowest value in the range of permitted values',
+    },
+    max: {
+      type: { name: 'number', required: true },
+      description: 'The greatest value in the range of permitted values',
+    },
+    step: {
+      type: { name: 'number', required: true },
+      description: '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',
+    },
+    value: {
+      type: { name: 'number', required: true },
+      description: 'The value attribute contains a number which contains a representation of the selected number',
+    },
+  },
+}
+
+const Template = args =>
+  <mds-input-range {...args}>
+    Range label
+  </mds-input-range>
+
+export const Default = Template.bind({})
+
+export const Min = Template.bind({})
+Min.args = {
+  min: -100,
+}
+
+export const Max = Template.bind({})
+Max.args = {
+  max: 200,
+}
+
+export const Step = Template.bind({})
+Step.args = {
+  step: 10,
+}
+
+export const Value = Template.bind({})
+Value.args = {
+  value: 90,
+}

package/src/components.d.ts

@@ -0,0 +1,88 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface MdsInputRange {
+        /**
+          * The greatest value in the range of permitted values
+         */
+        "max": number;
+        /**
+          * The lowest value in the range of permitted values
+         */
+        "min": number;
+        /**
+          * 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.
+         */
+        "step": number;
+        /**
+          * The value attribute contains a number which contains a representation of the selected number.
+         */
+        "value": number;
+    }
+}
+export interface MdsInputRangeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMdsInputRangeElement;
+}
+declare global {
+    interface HTMLMdsInputRangeElementEventMap {
+        "mdsInputRangeChange": number;
+    }
+    interface HTMLMdsInputRangeElement extends Components.MdsInputRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLMdsInputRangeElementEventMap>(type: K, listener: (this: HTMLMdsInputRangeElement, ev: MdsInputRangeCustomEvent<HTMLMdsInputRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLMdsInputRangeElementEventMap>(type: K, listener: (this: HTMLMdsInputRangeElement, ev: MdsInputRangeCustomEvent<HTMLMdsInputRangeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLMdsInputRangeElement: {
+        prototype: HTMLMdsInputRangeElement;
+        new (): HTMLMdsInputRangeElement;
+    };
+    interface HTMLElementTagNameMap {
+        "mds-input-range": HTMLMdsInputRangeElement;
+    }
+}
+declare namespace LocalJSX {
+    interface MdsInputRange {
+        /**
+          * The greatest value in the range of permitted values
+         */
+        "max"?: number;
+        /**
+          * The lowest value in the range of permitted values
+         */
+        "min"?: number;
+        /**
+          * Emits when the input range is changed
+         */
+        "onMdsInputRangeChange"?: (event: MdsInputRangeCustomEvent<number>) => void;
+        /**
+          * 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.
+         */
+        "step"?: number;
+        /**
+          * The value attribute contains a number which contains a representation of the selected number.
+         */
+        "value"?: number;
+    }
+    interface IntrinsicElements {
+        "mds-input-range": MdsInputRange;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "mds-input-range": LocalJSX.MdsInputRange & JSXBase.HTMLAttributes<HTMLMdsInputRangeElement>;
+        }
+    }
+}

package/src/dictionary/autocomplete.ts

@@ -0,0 +1,62 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+]
+
+export {
+  autoCompleteDictionary,
+}

package/src/dictionary/button.ts

@@ -0,0 +1,41 @@
+const buttonVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+]
+
+const buttonToneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+]
+
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+]
+
+const buttonSizeDictionary = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+]
+
+const buttonIconPositionDictionary = [
+  'left',
+  'right',
+]
+
+export {
+  buttonIconPositionDictionary,
+  buttonSizeDictionary,
+  buttonTargetDictionary,
+  buttonToneVariantDictionary,
+  buttonVariantDictionary,
+}

package/src/dictionary/color.ts

@@ -0,0 +1,24 @@
+const colorLabelDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+]
+
+const colorStatusDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
+export {
+  colorLabelDictionary,
+  colorStatusDictionary,
+}

package/src/dictionary/file-extensions.ts

@@ -0,0 +1,81 @@
+interface FileExtenstion {
+  [key: string]: ExtensionInfo
+}
+
+interface ExtensionInfo {
+  preview?: boolean
+  format: string
+  description: string
+}
+
+const fileExtensionsDictionary: FileExtenstion = {
+  '7z': { format: 'archive', description: 'Archivio compresso' },
+  ace: { format: 'archive', description: 'Archivio compresso' },
+  ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
+  dart: { format: 'code', description: 'Dart' },
+  db: { format: 'data', description: 'File di database' },
+  default: { format: 'attachment', description: 'Formato sconosciuto' },
+  dmg: { format: 'executable', description: 'Apple Disk Image' },
+  doc: { format: 'text', description: 'Documento Microsoft Word' },
+  docm: { format: 'text', description: 'Documento Microsoft Word' },
+  docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
+  eml: { format: 'email', description: 'E-mail di posta elettronica' },
+  eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
+  exe: { format: 'executable', description: 'File eseguibile Windows' },
+  flac: { format: 'audio', description: 'Audio non compresso' },
+  gif: { format: 'image', description: 'Immagine compressa', preview: true },
+  htm: { format: 'markup', description: 'Pagina web' },
+  heic: { format: 'image', description: 'High Efficiency Image File Format' },
+  html: { format: 'markup', description: 'Pagina web' },
+  jpe: { format: 'image', description: 'Immagine compressa', preview: true },
+  jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
+  jpg: { format: 'image', description: 'Immagine compressa', preview: true },
+  js: { format: 'code', description: 'JavaScript' },
+  json: { format: 'data', description: 'JavaScript Object Notation' },
+  jsx: { format: 'code', description: 'JavaScript' },
+  m2v: { format: 'video', description: 'Filmato SD' },
+  mp2: { format: 'audio', description: 'Audio compresso' },
+  mp3: { format: 'audio', description: 'Audio compresso' },
+  mp4: { format: 'video', description: 'Filmato HD' },
+  mp4v: { format: 'video', description: 'Filmato HD' },
+  mpeg: { format: 'video', description: 'Filmato SD' },
+  mpg4: { format: 'video', description: 'Filmato SD' },
+  mpg: { format: 'video', description: 'Filmato SD' },
+  mpga: { format: 'audio', description: 'Audio compresso' },
+  odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
+  ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
+  odt: { format: 'text', description: 'File di testo LibreOffice' },
+  pdf: { format: 'document', description: 'Documento Adobe' },
+  php: { format: 'code', description: 'Hypertext Preprocessor' },
+  png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
+  ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
+  rar: { format: 'archive', description: 'Archivio compresso' },
+  rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
+  sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
+  shtml: { format: 'markup', description: 'Pagina web' },
+  svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
+  tar: { format: 'archive', description: 'Archivio non compresso' },
+  tiff: { format: 'image', description: 'Tag Image File Format' },
+  ts: { format: 'code', description: 'TypeScript' },
+  tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
+  txt: { format: 'text', description: 'Documento di testo non formattato' },
+  wav: { format: 'audio', description: 'Audio non compresso' },
+  webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
+  xar: { format: 'archive', description: 'Archivio compresso' },
+  xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+  xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+  zip: { format: 'archive', description: 'Archivio compresso' },
+}
+
+const genericMimeToExt: Map<string, string[]> = new Map([
+  ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
+  ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],
+  ['video', ['.mv2', '.mp4', '.mp4v', '.mpeg', '.mpg4', '.mpg']],
+])
+
+export {
+  FileExtenstion,
+  ExtensionInfo,
+  fileExtensionsDictionary,
+  genericMimeToExt,
+}

package/src/dictionary/floating-ui.ts

@@ -0,0 +1,25 @@
+
+const floatingUIPlacementDictionary = [
+  'bottom',
+  'bottom-end',
+  'bottom-start',
+  'left',
+  'left-end',
+  'left-start',
+  'right',
+  'right-end',
+  'right-start',
+  'top',
+  'top-end',
+  'top-start',
+]
+
+const floatingUIStrategyDictionary = [
+  'absolute',
+  'fixed',
+]
+
+export {
+  floatingUIPlacementDictionary,
+  floatingUIStrategyDictionary,
+}

package/src/dictionary/icon.ts

@@ -0,0 +1,15 @@
+import jsonIconsDictionary from '../fixtures/icons.json'
+import jsonMggIconsDictionary from '../fixtures/iconsauce.json'
+const iconsDictionary = jsonIconsDictionary
+const mggIconsDictionary = jsonMggIconsDictionary
+const svgIconsDictionary = [
+  `${location.origin}/svg/mi/baseline/email.svg`,
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yMzMtODAgNjUtMjgxTDgwLTU1MGwyODgtMjUgMTEyLTI2NSAxMTIgMjY1IDI4OCAyNS0yMTggMTg5IDY1IDI4MS0yNDctMTQ5TDIzMy04MFoiLz48L3N2Zz4=',
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>',
+]
+
+export {
+  iconsDictionary,
+  mggIconsDictionary,
+  svgIconsDictionary,
+}

package/src/dictionary/input.ts

@@ -0,0 +1,48 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+]
+
+const inputFieldTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+  'cc',
+  'cf',
+  'isbn',
+  'piva',
+]
+
+
+const inputControlsLayoutDictionary = [
+  'horizontal',
+  'vertical',
+]
+
+const inputControlsIconDictionary = [
+  'arrow',
+  'arithmetic',
+]
+
+export {
+  inputControlsIconDictionary,
+  inputControlsLayoutDictionary,
+  inputTextTypeDictionary,
+  inputFieldTypeDictionary,
+}
+

package/src/dictionary/loading.ts

@@ -0,0 +1,9 @@
+const loadingDictionary = [
+  'eager',
+  'lazy',
+]
+
+export {
+  loadingDictionary,
+}
+

package/src/dictionary/text.ts

@@ -0,0 +1,9 @@
+const truncateDictionary = [
+  'all',
+  'none',
+  'word',
+]
+
+export {
+  truncateDictionary,
+}