@knowark/componarkjs 1.7.3

package/lib/base/utils/slots.js

@@ -0,0 +1,18 @@
+/**
+ * @param {HTMLElement} container
+ * @return {Object<string, Array<HTMLElement>>}
+ * */
+export function getSlots (container) {
+  const slots = { general: [] }
+
+  for (const element of container.children) {
+    const slot = element.getAttribute('slot') || 'general'
+    if (!Object.keys(slots).includes(slot)) slots[slot] = []
+
+    slots[slot].push(element)
+  }
+
+  return slots
+}
+
+export const slot = getSlots

package/lib/base/utils/slots.test.js

@@ -0,0 +1,52 @@
+import { getSlots } from './slots.js'
+
+describe('Slots', () => {
+  it('can be rendered without content', () => {
+    const item = document.createElement('div')
+    const slots = getSlots(item)
+    expect(!slots.general.length).toBeTruthy()
+  })
+
+  it('can be rendered with content', () => {
+    const item = document.createElement('div')
+
+    const obj = document.createElement('div')
+
+    item.appendChild(obj)
+    const slots = getSlots(item)
+    expect(slots.general.length).toBeTruthy()
+  })
+
+  it('can be rendered with value slot', () => {
+    const item = document.createElement('div')
+
+    const obj = document.createElement('div')
+    const att = document.createAttribute('slot')
+    att.value = 'mySlot'
+    obj.setAttributeNode(att)
+
+    item.appendChild(obj)
+    const slots = getSlots(item)
+    expect(slots.mySlot.length).toBeTruthy()
+  })
+
+  it('can be rendered with multiple values slot', () => {
+    const item = document.createElement('div')
+
+    const obj = document.createElement('div')
+    const att = document.createAttribute('slot')
+    att.value = 'mySlot'
+    obj.setAttributeNode(att)
+
+    item.appendChild(obj)
+
+    const obj2 = document.createElement('div')
+    const att2 = document.createAttribute('slot')
+    att2.value = 'mySlot'
+    obj2.setAttributeNode(att2)
+
+    item.appendChild(obj2)
+    const slots = getSlots(item)
+    expect(slots.mySlot.length).toBeTruthy()
+  })
+})

package/lib/base/utils/uuid.js

@@ -0,0 +1,9 @@
+/** @returns {string} */
+export function uuid () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+    /[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0
+    var v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}

package/lib/base/utils/uuid.test.js

@@ -0,0 +1,19 @@
+import { uuid } from './uuid.js'
+
+describe('Slots', () => {
+  it('groups separated by dashes', () => {
+    const id = uuid()
+    expect(id.split('-').length === 5).toBeTruthy()
+  })
+
+  it('total digits == 32', () => {
+    const id = uuid()
+
+    let digits = ''
+    id.split('-').forEach(element => {
+      digits += element
+    })
+
+    expect(digits.length === 32).toBeTruthy()
+  })
+})

package/lib/components/audio/README.md

@@ -0,0 +1,22 @@
+Audio
+=====
+
+`ark-audio` allows the user to record audio using the current microphone device.
+
+## Example
+
+``` html
+  <ark-audio></ark-audio>
+```
+
+## Attributes
+
+|  Name  | Default |                        Description                         |
+| :----: | :-----: | :--------------------------------------------------------: |
+| status |    -    | Different status (idle,recording,done)  adds automatically |
+
+## Properties
+
+|  Name  | Default |                        Description                         |
+| :----: | :-----: | :--------------------------------------------------------: |
+| status |    -    | Different status (idle,recording,done)  adds automatically |

package/lib/components/audio/components/audio.js

@@ -0,0 +1,103 @@
+import { Component } from '../../../base/component/index.js'
+import styles from '../styles/index.js'
+
+const tag = 'ark-audio'
+export class Audio extends Component {
+  init (context = {}) {
+    this.status = 'idle'
+    this.dataURL = null
+    this.timerId = null
+    this.recorder = null
+    this.global = context.global || window
+
+    return super.init()
+  }
+
+  reflectedProperties() {
+    return ['status']
+  }
+
+  render () {
+    if (this.status === 'done') {
+      this.content = `
+      <div class="ark-audio__done">
+        <audio class="ark-audio__audio" controls></audio>
+        <button listen on-click="reset">❌</button>
+      </div>
+      `
+    } else if (this.status === 'recording') {
+      this.content = `
+      <div class="ark-audio__recording">
+        <label>Recording</label>  
+        <span class="ark-audio__timer">00:00</span>
+        <button listen on-click="stop">⏹️</button>
+      </div>
+      `
+    } else {
+      this.content = `
+      <div class="ark-audio__idle">
+        <button listen on-click="start">⏺️</button>
+      </div>
+      `
+    }
+
+    return super.render()
+  }
+
+  /** @param {Event} event */
+  async start (event) {
+    event.stopPropagation()
+    this.status = 'recording'
+    this.render()
+    const options = {audio: true}
+    const navigator = this.global.navigator
+    const stream = await navigator.mediaDevices.getUserMedia(options)
+
+    this.recorder = new this.global.MediaRecorder(stream)
+    this.recorder.addEventListener('dataavailable', this._onData.bind(this))
+    this.timerId = this._time()     
+    this.recorder.start()
+  }
+
+  /** @param {Event} event */
+  stop (event) {
+    event.stopPropagation()
+    this.status = 'done'
+    clearInterval(this.timerId)
+    this.recorder.stop()
+    this.recorder.stream.getTracks().forEach(track => track.stop())
+    this.render()
+  }
+
+  reset () {
+    this.status = 'idle'
+    this.render()
+    this.dataURL = null
+    this.timerId = null
+    this.recorder = null
+  }
+
+  _time () {
+    let count = 0
+    return  setInterval(() => {
+      count += 1
+      const seconds = count % 60
+      const minutes = Math.trunc(count / 60)
+      let content = `${minutes < 10 ? '0' + minutes : minutes}:`
+      content += `${seconds < 10 ? '0' + seconds : seconds}`
+
+      const timer = this.select('.ark-audio__timer')
+      timer.textContent = content
+    }, 1000)
+  }
+
+  /** @param {any} event */
+  _onData(event) {
+    const audio = this.select('.ark-audio__audio')
+    audio['src'] = this.global.URL.createObjectURL(event.data)
+    const reader = new this.global.FileReader()
+    reader.readAsDataURL(event.data)
+    reader.onloadend = () => { this.dataURL = reader.result }
+  }
+}
+Component.define(tag, Audio, styles)

package/lib/components/audio/components/audio.test.js

@@ -0,0 +1,127 @@
+import { jest } from '@jest/globals'
+import './audio.js'
+
+jest.useFakeTimers()
+
+const mockGlobal = {
+  navigator: {
+    mediaDevices: {
+      getUserMedia: async (options) => {}
+    }
+  },
+  MediaRecorder: function (stream) {
+    this.stream = stream
+    this.start = () => {}
+    this.addEventListener = (type, callback) => {}
+    this.stop = () => {}
+    this.stream = {getTracks: () => [{stop: () => null}]}
+  },
+  FileReader: function () {
+    const self = this
+    this.readAsDataURL = (data) => setTimeout(
+      () => self['onloadend'](), 1000)
+    this.result = 'base64::data::result'
+
+  },
+  URL: {createObjectURL: (data) => 'mock://data/url'}
+}
+
+describe('Audio', () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init()
+    expect(audio).toBeTruthy()
+  })
+
+  it('can start recording', async () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init({global: mockGlobal})
+
+    expect(audio.status).toEqual('idle')
+    await audio.start(new Event('click'))
+    expect(audio.status).toEqual('recording')
+    expect(audio.recorder).toBeTruthy()
+  })
+
+  it('can stop recording', async () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init({global: mockGlobal})
+
+    expect(audio.status).toEqual('idle')
+    await audio.start(new Event('click'))
+    expect(audio.status).toEqual('recording')
+    audio.stop(new Event('click'))
+    expect(audio.status).toEqual('done')
+  })
+
+  it('can reset recording', async () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init({global: mockGlobal})
+
+    expect(audio.status).toEqual('idle')
+    await audio.start(new Event('click'))
+    expect(audio.status).toEqual('recording')
+    audio.stop(new Event('click'))
+    expect(audio.status).toEqual('done')
+    audio.reset(new Event('click'))
+    expect(audio.status).toEqual('idle')
+    expect(audio.recorder).toBeNull()
+  })
+
+  it('counts the ellapsed time of the recording', async () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init({global: mockGlobal})
+
+    await audio.start(new Event('click'))
+    jest.runOnlyPendingTimers()
+
+    const timer = audio.select('.ark-audio__timer')
+    expect(timer.textContent).toEqual('00:01')
+    jest.advanceTimersByTime(623000)
+    expect(timer.textContent).toEqual('10:24')
+  })
+
+  it('sets the dataURL (base64) property when stopped', async () => {
+    container.innerHTML = `
+      <ark-audio></ark-audio>
+    `
+    const audio = container.querySelector('ark-audio')
+    audio.init({global: mockGlobal})
+
+    await audio.start(new Event('click'))
+    audio.stop(new Event('click'))
+
+    audio._onData({data: new Blob(['Hello'], {type: 'text/plain'})})
+    jest.runOnlyPendingTimers()
+
+    expect(audio.dataURL).toEqual('base64::data::result')
+    expect(audio.querySelector('.ark-audio__audio').src).toEqual(
+      'mock://data/url')
+  })
+})

package/lib/components/audio/index.js

@@ -0,0 +1 @@
+export { Audio } from './components/audio.js'

package/lib/components/audio/styles/ark.css.js

@@ -0,0 +1,83 @@
+const css = String.raw; export default css`
+.ark-audio {
+  display: grid;
+  align-items: center;
+  width: fit-content;
+  height: auto;
+  overflow: hidden;
+  padding: 0 0.5rem;
+  user-select: none;
+  background: white;
+  border: 2px solid rgba(190, 189, 189, 0.856);
+  min-width: 150px;
+}
+
+.ark-audio ark-button {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.ark-audio__recording {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  align-items: center;
+  width: 15rem;
+}
+
+.ark-audio__recording label {
+  font-weight: 700;
+}
+
+.ark-audio__timer {
+  display: grid;
+  justify-items: center;
+  background: var(--light);
+  color: var(--dark);
+  align-items: center;
+  padding: 0.8rem 0.5rem;
+}
+
+.ark-audio__idle {
+  display: grid;
+}
+
+.ark-audio__idle::before {
+  content: "Grabar";
+  padding-right: 0.25em;
+}
+
+.ark-audio__done {
+  display: grid;
+  grid-template-columns: 1fr 0.2fr;
+  border-radius: 2rem;
+}
+
+.ark-audio__done audio {
+  width: 220px;
+  height: 54px;
+  outline: none;
+}
+
+.ark-audio:hover {
+  border: 2px solid var(--primary);
+}
+
+.ark-audio ark-button {
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.ark-audio__idle {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+  text-align: center;
+  align-items: center;
+}
+`

package/lib/components/audio/styles/index.js

@@ -0,0 +1,2 @@
+import styles from './ark.css.js'
+export default styles

package/lib/components/camera/README.md

@@ -0,0 +1,64 @@
+CAMERA
+======
+
+The ``ark-camera`` allows the user to get access to the current device camera. 
+
+
+Examples
+--------
+
+**The camera needs buttons with events assigned that makes use of the internal methods of the component** 
+
+``` html
+    <ark-camera></ark-camera>
+    
+    <ark-button listen on-click="takepicture">Take photo</ark-button>
+    <ark-button listen on-click="startCamera">Start</ark-button>
+    <ark-button listen on-click="stopCamera">stop</ark-button>
+```
+
+**Define functions to enable the events in the buttons**
+
+``` javascript
+    takepicture() {
+    this.photo.setAttribute('src', this.camera['dataURL'](200, 200))
+    }
+
+    startCamera() {
+        this.camera['start']()
+    }
+
+    stopCamera() {
+        this.camera['stop']()
+    }
+```
+
+
+Attributes
+----------
+
+|    Name     |  Type  | Default |                    options                     |       Description       |
+| :---------: | :----: | :-----: | :--------------------------------------------: | :---------------------: |
+|    width    | string |   320   |                       -                        | width of camera window  |
+|   height    | string |   320   |                       -                        | height of camera window |
+| facing-mode | string |  user   | ``user``, ``environment``, ``left``, ``right`` |   camera orientation    |
+
+Properties
+----------
+
+|    Name    |  Type  | Default |                    options                     |       Description       |
+| :--------: | :----: | :-----: | :--------------------------------------------: | :---------------------: |
+|   width    | string |   320   |                       -                        | width of camera window  |
+|   height   | string |   320   |                       -                        | height of camera window |
+| facingMode | string |  user   | ``user``, ``environment``, ``left``, ``right`` |   camera orientation    |
+
+
+Methods
+-------
+
+|         Name         |      Parameters       |         Description          |
+| :------------------: | :-------------------: | :--------------------------: |
+|        start         |           -           |     start device camera      |
+|         stop         |           -           |      stop device camera      |
+|       dataURL        | ``width``, ``height`` |  Saves a frame as png image  |
+| setCameraOrientation |    ``facingMode``     | Set's the camera orientation |

package/lib/components/camera/components/camera.js

@@ -0,0 +1,85 @@
+import { Component } from '../../../base/component/index.js'
+import styles from '../styles/index.js'
+
+const tag = 'ark-camera'
+export class Camera extends Component {
+  init (context = {}) {
+    this.width = this.width || context.width || 320
+    this.height = this.height || context.height || 320
+    this.facingMode = this.facingMode || context.facingMode || 'user'
+    this.global = context.global || window
+
+    return super.init()
+  }
+
+  reflectedProperties () {
+    return ['width', 'height', 'facingMode']
+  }
+
+  render () {
+    this.content = /* html */`
+      <canvas class="ark-camera__canvas"></canvas>
+      <video class="ark-camera__video" playsinline autoplay></video>
+    `
+
+    this.video.addEventListener('canplay', _ => {
+      this.video.setAttribute('width', `${this.width}px`)
+      this.video.setAttribute('height', `${this.height}px`)
+      this.canvas.setAttribute('width', `${this.width}px`)
+      this.canvas.setAttribute('height', `${this.height}px`)
+    }, false)
+
+    return super.render()
+  }
+
+  /** @returns {string} */
+  dataURL (width = null, height = null) {
+    /** @type {HTMLCanvasElement} */
+    const canvas = (this.canvas.cloneNode(true))
+
+    canvas.width = width || this.width
+    canvas.height = height || this.height
+    canvas.getContext('2d').drawImage(
+      this.video,
+      0, 0, this.width, this.height,
+      0, 0, width, height)
+
+    return canvas.toDataURL('image/jpg')
+  }
+
+  async start () {
+    const stream = await this.global.navigator.mediaDevices.getUserMedia({
+      video: {
+        width: this.width,
+        height: this.height,
+        facingMode: this.facingMode
+      },
+      audio: false
+    })
+
+    this.video.srcObject = stream
+  }
+
+  stop () {
+    // @ts-ignore
+    const tracks = this.video.srcObject ? this.video.srcObject.getTracks() : []
+    tracks.forEach(track => track.stop())
+  }
+
+  async setCameraOrientation (facingMode) {
+    this.stop()
+    this.facingMode = facingMode
+    await this.start()
+  }
+
+  /** @returns {HTMLVideoElement} */
+  get video () {
+    return this.querySelector('.ark-camera__video')
+  }
+
+  /** @returns {HTMLCanvasElement} */
+  get canvas () {
+    return this.querySelector('.ark-camera__canvas')
+  }
+}
+Component.define(tag, Camera, styles)

package/lib/components/camera/components/camera.test.js

@@ -0,0 +1,104 @@
+import './camera.js'
+
+const mockGlobal = () => ({
+  navigator: {
+    mediaDevices: {
+      __stops: 0,
+      async getUserMedia(_options) {
+        return { getTracks: () => [{stop: () => {this.__stops += 1}}] }
+      }
+    }
+  }
+})
+
+describe('Camera', () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = `
+      <ark-camera></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    expect(camera).toBeTruthy()
+
+    expect(camera).toBe(camera.init())
+  })
+
+  it('sets its dimensions on canplay event', async () => {
+    container.innerHTML = `
+      <ark-camera width="50" height="80"></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    const video = camera.select('video')
+    const canvas = camera.select('canvas')
+
+    video.dispatchEvent(new Event('canplay'))
+
+    expect(video.width).toEqual(50)
+    expect(video.height).toEqual(80)
+
+    expect(canvas.width).toEqual(50)
+    expect(canvas.height).toEqual(80)
+  })
+
+  it('can start video recording', async () => {
+    container.innerHTML = `
+      <ark-camera></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    camera.init({global: mockGlobal()})
+
+    await camera.start()
+
+    expect(camera.video.srcObject.getTracks()).toBeTruthy()
+  })
+
+  it('can stop video recording', async () => {
+    container.innerHTML = `
+      <ark-camera></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    const global = mockGlobal()
+    camera.init({global: global})
+
+    await camera.start()
+
+    camera.stop()
+
+    expect(global.navigator.mediaDevices.__stops).toEqual(1)
+  })
+
+  it('can set the camera orientation', async () => {
+    container.innerHTML = `
+      <ark-camera></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    const global = mockGlobal()
+    camera.init({global: global})
+
+    await camera.setCameraOrientation('environment')
+
+    expect(camera.facingMode).toEqual('environment')
+  })
+
+  it('gets the dataURL (base64) of its containing canvas', async () => {
+    container.innerHTML = `
+      <ark-camera></ark-camera>
+    `
+    const camera = container.querySelector('ark-camera')
+    camera.init({global: mockGlobal()})
+
+    const data = camera.dataURL()
+
+    expect(data).toBeTruthy()
+  })
+})

package/lib/components/camera/index.js

@@ -0,0 +1 @@
+export { Camera } from './components/camera.js'