@maggioli-design-system/mds-push-notification 1.1.0

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,21 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm-es5/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "mds-push-notification-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,51 @@
+{
+  "name": "@maggioli-design-system/mds-push-notification",
+  "version": "1.1.0",
+  "description": "mds-push-notification 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-push-notification/mds-push-notification.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-button": "4.15.0",
+    "@maggioli-design-system/mds-icon": "2.9.0",
+    "@maggioli-design-system/mds-text": "4.2.0",
+    "@maggioli-design-system/styles": "14.2.1",
+    "@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,67 @@
+# mds-push-notification
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                                          | Type                                                                                                                                                                                    | Default                          |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `icon`     | `icon`     | Specifies the icon to be displayed                                                                                                                   | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `initials` | `initials` | The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `message`  | `message`  | Specifies the message of the component                                                                                                               | `string`                                                                                                                                                                                | `'Nessun messaggio disponibile'` |
+| `preview`  | `preview`  | Specifies if the `src` attribute is used to show a the image as avatar or full image                                                                 | `"avatar" \| "image" \| undefined`                                                                                                                                                      | `'image'`                        |
+| `src`      | `src`      | Specifies the path to the image                                                                                                                      | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `subject`  | `subject`  | Specifies the subject of the component                                                                                                               | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `tone`     | `tone`     | Specifies the color tone of the component                                                                                                            | `"strong" \| "weak" \| undefined`                                                                                                                                                       | `'weak'`                         |
+| `variant`  | `variant`  | Specifies the color variant of the component                                                                                                         | `"amaranth" \| "aqua" \| "blue" \| "error" \| "green" \| "info" \| "lime" \| "orange" \| "orchid" \| "primary" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow" \| undefined` | `undefined`                      |
+
+
+## Slots
+
+| Slot        | Description                                                                             |
+| ----------- | --------------------------------------------------------------------------------------- |
+| `"actions"` | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element. |
+
+
+## Shadow Parts
+
+| Part        | Description                                |
+| ----------- | ------------------------------------------ |
+| `"actions"` | The actions wrapper                        |
+| `"avatar"`  |                                            |
+| `"content"` | The content wrapper of the message         |
+| `"icon"`    | The icon set by `icon` attribute           |
+| `"picture"` | The picture image added by `src` attribute |
+
+
+## Dependencies
+
+### Depends on
+
+- [mds-avatar](../mds-avatar)
+- [mds-img](../mds-img)
+- [mds-text](../mds-text)
+- [mds-button](../mds-button)
+
+### Graph
+```mermaid
+graph TD;
+  mds-push-notification --> mds-avatar
+  mds-push-notification --> mds-img
+  mds-push-notification --> mds-text
+  mds-push-notification --> mds-button
+  mds-avatar --> mds-text
+  mds-avatar --> mds-img
+  mds-avatar --> mds-icon
+  mds-button --> mds-spinner
+  mds-button --> mds-icon
+  mds-button --> mds-text
+  style mds-push-notification 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,46 @@
+export class KeyboardManager {
+  private escapeCallback: () => void
+  private elements = []
+
+  private handleClickBehaviorDispatchEvent = (event: KeyboardEvent): void => {
+    if (event.code === 'Space' || 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 => {
+    this.elements[name] = el
+  }
+
+  attachClickBehavior = (name = 'element'): void => {
+    if (this.elements[name]) {
+      this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent)
+    }
+  }
+
+  detachClickBehavior = (name = 'element'): void => {
+    if (this.elements[name]) {
+      this.elements[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-push-notification/.gitlab-ci.yml

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