@knowark/componarkjs 1.7.4 → 1.7.6

package/lib/components/translate/components/translate.js

@@ -11,14 +11,14 @@ export class Translate extends Component {
 
     const dictionary = this.select('template')
     if (dictionary) {
-      const content = dictionary.content['textContent']
-      this.dictionary = JSON.parse(content) 
+      const content = dictionary.content.textContent
+      this.dictionary = JSON.parse(content)
     }
 
     return super.init(context)
   }
 
-  reflectedProperties() {
+  reflectedProperties () {
     return ['languages', 'endpoint', 'namespace', 'root']
   }
 
@@ -30,20 +30,20 @@ export class Translate extends Component {
     this.content = `
     <select listen on-change="onLanguageChanged">
       ${languages.map(code => `
-        <option value="${code}">${LANGUAGE_LIST[code]['name']}</option>
+        <option value="${code}">${LANGUAGE_LIST[code].name}</option>
       `)}
     </select>
     `
     return super.render()
   }
 
-  async onLanguageChanged(event) {
+  async onLanguageChanged (event) {
     event.stopPropagation()
     const language = event.target.value
     await this.transliterate({ language })
   }
 
-  async transliterate(options = {}) {
+  async transliterate (options = {}) {
     const language = options.language || 'es'
     const root = this.global.document.querySelector(
       options.root || this.root)
@@ -56,11 +56,11 @@ export class Translate extends Component {
     }
   }
 
-  parseKey(value) {
+  parseKey (value) {
     let key = value
     let namespace = this.namespace
 
-    const splitList  = value.split(':')
+    const splitList = value.split(':')
     if (splitList.length > 1) {
       namespace = splitList[0]
       key = splitList[1]
@@ -69,17 +69,17 @@ export class Translate extends Component {
     return { key, namespace }
   }
 
-  async resolveDictionary(language, namespace) {
-    let dictionary = ((this.dictionary[language]
-        || {})[namespace] || null)
+  async resolveDictionary (language, namespace) {
+    let dictionary = ((this.dictionary[language] ||
+        {})[namespace] || null)
 
     if (dictionary !== null) return dictionary
 
     if (!this.global.fetch) return {}
-    
+
     const url = `${this.endpoint}/${language}/${namespace}.json`
     const response = await this.global.fetch(url)
-    
+
     dictionary = await response.json()
 
     this.dictionary[language] || (this.dictionary[language] = {})
@@ -87,14 +87,12 @@ export class Translate extends Component {
 
     return dictionary
   }
-
 }
 Component.define(tag, Translate)
 
-
 const LANGUAGE_LIST = {
-  es: {name: 'Español'},
-  en: {name: 'English'},
-  fr: {name: 'Français'},
-  pt: {name: 'Português'}
+  es: { name: 'Español' },
+  en: { name: 'English' },
+  fr: { name: 'Français' },
+  pt: { name: 'Português' }
 }

package/lib/components/translate/components/translate.test.js

@@ -54,7 +54,7 @@ describe('Translate', () => {
     </ark-translate>
     `
     container.appendChild(translateContainer)
-    const translate = /** @type Translate **/  (
+    const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
 
     await translate.transliterate()
@@ -111,7 +111,7 @@ describe('Translate', () => {
     const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
 
-    let options = { language: 'en', }
+    let options = { language: 'en' }
     await translate.transliterate(options)
 
     const expectedRoot = document.createElement('div')
@@ -124,7 +124,6 @@ describe('Translate', () => {
     `
     expect(root).toEqual(expectedRoot)
 
-
     // Unknown Namespace:
 
     root.innerHTML = /* html */`
@@ -171,18 +170,17 @@ describe('Translate', () => {
     container.appendChild(translateContainer)
     const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
-    const mockEvent = {
-      target: {value: 'en'}, stopPropagation: () => {}}
+    const mockEvent = { target: { value: 'en' }, stopPropagation: () => {} }
     let givenOptions = null
     translate.transliterate = async (options) => {
-      givenOptions = options }
+      givenOptions = options
+    }
 
     await translate.onLanguageChanged(mockEvent)
 
-    expect(givenOptions).toEqual({language: 'en'})
+    expect(givenOptions).toEqual({ language: 'en' })
   })
 
-
   it('fetches its translation files from the server', async () => {
     const root = document.createElement('div')
     root.innerHTML = /* html */`
@@ -203,15 +201,16 @@ describe('Translate', () => {
 
     const mockFetch = async (url) => ({
       json: async () => ({
-        "hello": "Hola",
-        "world": "Mundo",
-        "happy": "Feliz"
+        hello: 'Hola',
+        world: 'Mundo',
+        happy: 'Feliz'
       })
     })
-    translate.init({ global: {
-      fetch: mockFetch, document: document } })
+    translate.init({
+      global: { fetch: mockFetch, document }
+    })
 
-    await translate.transliterate({language: 'es'})
+    await translate.transliterate({ language: 'es' })
 
     const expectedRoot = document.createElement('div')
     expectedRoot.innerHTML = /* html */`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",

package/showcase/components/demos/audio.js

@@ -24,5 +24,5 @@ const styles = `
     margin: 1rem;
   }
 `
- 
+
 Component.define('demo-audio', AudioDemo, styles)

package/showcase/components/demos/camera.js

@@ -24,25 +24,25 @@ export class CameraDemo extends Component {
       </a>
     `
 
-    this.camera['start']()
+    this.camera.start()
 
     return super.render()
   }
 
   disconnectedCallback () {
-    this.camera['stop']()
+    this.camera.stop()
   }
 
   takepicture () {
-    this.photo.setAttribute('src', this.camera['dataURL'](200, 200))
+    this.photo.setAttribute('src', this.camera.dataURL(200, 200))
   }
 
   startCamera () {
-    this.camera['start']()
+    this.camera.start()
   }
 
   stopCamera () {
-    this.camera['stop']()
+    this.camera.stop()
   }
 
   get camera () {
@@ -53,7 +53,6 @@ export class CameraDemo extends Component {
   get photo () {
     return this.querySelector('[data-photo]')
   }
-
 }
 
 const styles = /* css */`

package/showcase/components/demos/droparea.js

@@ -2,11 +2,11 @@ import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-droparea'
 export class DropareaDemo extends Component {
-  init(context) {
+  init (context) {
     return super.init(context)
   }
 
-  render() {
+  render () {
     this.innerHTML = /* html */ `
       <h1 class="title">
         This is a drop area
@@ -38,7 +38,7 @@ export class DropareaDemo extends Component {
     return super.render()
   }
 
-  async load() {
+  async load () {
     const myUrl =
       'https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1888&q=80'
 
@@ -46,15 +46,15 @@ export class DropareaDemo extends Component {
     this.select('ark-droparea[data-load]').update({ contextFiles: [myFile] })
   }
 
-  async getFileFromUrl(url, name, defaultType = 'image/jpeg') {
+  async getFileFromUrl (url, name, defaultType = 'image/jpeg') {
     const response = await fetch(url)
     const data = await response.blob()
     return new File([data], name, {
-      type: response.headers.get('content-type') || defaultType,
+      type: response.headers.get('content-type') || defaultType
     })
   }
 
-  async onFileList(event) {
+  async onFileList (event) {
     const element = this.querySelector('[data-file-multi]')
     const droparea = this.select('.ark-droparea')
     const urlList = []

package/showcase/components/demos/list.js

@@ -60,7 +60,7 @@ export class ListDemo extends Component {
     templateList
       .init({
         source: sourceTemplate,
-        template: template
+        template
       })
       .render()
 
@@ -85,5 +85,4 @@ const styles = /* css */`
   }
 `
 
-
 Component.define(tag, ListDemo, styles)

package/showcase/components/demos/paginator.js

@@ -2,14 +2,14 @@ import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-paginator'
 export class PaginatorDemo extends Component {
-  init(context = {}) {
+  init (context = {}) {
     this.limit = 1
     this.offset = 0
     this.page = 1
     return super.init(context)
   }
 
-  render() {
+  render () {
     this.content = /* html */ `
       <ark-list background="light" color="dark"></ark-list>
       <ark-paginator listen on-page-changed="onPageChanged" 
@@ -25,7 +25,7 @@ export class PaginatorDemo extends Component {
     return super.render()
   }
 
-  async load() {
+  async load () {
     const template = (item) => /* html */ `
     <h1>${item.year}</h1>
     <span data-first>FIRST: ${item.first}</span>
@@ -43,7 +43,7 @@ export class PaginatorDemo extends Component {
     this.select('ark-list')
       .init({
         source: source(),
-        template: template,
+        template
       })
       .render()
 
@@ -51,14 +51,14 @@ export class PaginatorDemo extends Component {
     paginator
       .init({
         collectionSize: this.list.length,
-        currentPage: this.page,
+        currentPage: this.page
       })
       .render()
     return super.load()
   }
 
   /** @param {CustomEvent} event */
-  async onPageChanged(event) {
+  async onPageChanged (event) {
     event.stopPropagation()
     this.limit = event.detail.limit
     this.offset = event.detail.offset
@@ -66,7 +66,7 @@ export class PaginatorDemo extends Component {
     await this.update()
   }
 
-  get list() {
+  get list () {
     return [
       { first: 'Colombia', second: 'Argentina', year: 2016 },
       { first: 'Uruguay', second: 'Colombia', year: 2017 },
@@ -75,7 +75,7 @@ export class PaginatorDemo extends Component {
       { first: 'Argentina', second: 'Argentina', year: 2020 },
       { first: 'Chile', second: 'Colombia', year: 2021 },
       { first: 'Colombia', second: 'Argentina', year: 2022 },
-      { first: 'Uruguay', second: 'Bolivia', year: 2023 },
+      { first: 'Uruguay', second: 'Bolivia', year: 2023 }
     ]
   }
 }

package/showcase/components/demos/splitview.js

@@ -29,7 +29,6 @@ export class SplitViewDemo extends Component {
     return super.render()
   }
 
-
   initList () {
     const template = item => /* html */ `
       <h1>${item.year}</h1>
@@ -46,17 +45,16 @@ export class SplitViewDemo extends Component {
     ]
 
     this.select('[data-list]').init({
-      source: source,
-      template: template
+      source,
+      template
     }).render()
-
   }
 }
 Component.define(tag, SplitViewDemo)
 
-tag = "demo-splitview-detail"
+tag = 'demo-splitview-detail'
 export class SplitviewDetailDemo extends Component {
-  init(context = {}) {
+  init (context = {}) {
     if (!context.data) return super.init()
 
     const data = context.data
@@ -66,7 +64,7 @@ export class SplitviewDetailDemo extends Component {
     return super.init()
   }
 
-  render() {
+  render () {
     this.content = this.first
       ? /* html */ `
       <button listen on-click="onClick"

package/showcase/components/demos/translate.js

@@ -1,9 +1,9 @@
 import { Component } from '@knowark/componarkjs'
 
-const tag = "demo-translate"
+const tag = 'demo-translate'
 export class TranslateDemo extends Component {
-  render() {
-    const context = JSON.stringify({name: 'Esteban'})
+  render () {
+    const context = JSON.stringify({ name: 'Esteban' })
     this.content = /* html */ `
 
     <section class="translate-demo_container">
@@ -29,7 +29,6 @@ export class TranslateDemo extends Component {
 
     return super.render()
   }
-
 }
 const styles = /* css */ `
 

package/showcase/index.js

@@ -1,4 +1,3 @@
-
 const version = VERSION
 
 const versionElement = document.getElementById('version')

package/webpack.config.cjs

@@ -1,116 +1,116 @@
-const path = require("path")
-const { DefinePlugin, EnvironmentPlugin } = require("webpack")
-const { CleanWebpackPlugin } = require("clean-webpack-plugin")
-const CopyWebpackPlugin = require("copy-webpack-plugin")
-const HtmlWebpackPlugin = require("html-webpack-plugin")
+const path = require('path')
+const { DefinePlugin, EnvironmentPlugin } = require('webpack')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = (env, argv) => {
-  const devMode = argv.mode === "development"
+  const devMode = argv.mode === 'development'
   const target = env.TARGET
 
   const commonConfig = {
     mode: argv.mode,
     entry: {
-      showcase: "./lib/showcase/design/index.js",
+      showcase: './lib/showcase/design/index.js'
     },
     plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
-        chunks: ["showcase", "runtime"],
-        title: "Componark",
-        template: "./lib/showcase/design/index.html",
+        chunks: ['showcase', 'runtime'],
+        title: 'Componark',
+        template: './lib/showcase/design/index.html'
       }),
       new CopyWebpackPlugin({
-        patterns: ["lib/showcase/design/.htaccess"],
+        patterns: ['lib/showcase/design/.htaccess']
       }),
       new DefinePlugin({
         PRODUCTION: !devMode,
-        VERSION: JSON.stringify(require("./package.json").version),
-        TARGET: JSON.stringify(target),
-      }),
+        VERSION: JSON.stringify(require('./package.json').version),
+        TARGET: JSON.stringify(target)
+      })
     ],
     module: {
       rules: [
         {
           test: /\.(png|svg|jpg|gif)$/,
-          use: ["file-loader"],
+          use: ['file-loader']
         },
         {
           test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
           use: [
             {
-              loader: "file-loader",
+              loader: 'file-loader',
               options: {
-                name: "[name].[ext]",
-                outputPath: "fonts/",
-              },
-            },
-          ],
+                name: '[name].[ext]',
+                outputPath: 'fonts/'
+              }
+            }
+          ]
         }
-      ],
+      ]
     },
     resolve: {
       alias: {
-        base: path.resolve(__dirname, "./lib/base/"),
-        components: path.resolve(__dirname, "./lib/components/"),
-        screens: path.resolve(__dirname, "./lib/showcase/screens/"),
-      },
-    },
+        base: path.resolve(__dirname, './lib/base/'),
+        components: path.resolve(__dirname, './lib/components/'),
+        screens: path.resolve(__dirname, './lib/showcase/screens/')
+      }
+    }
   }
 
   const arkConfig = Object.assign({}, commonConfig, {
-    name: "ark",
+    name: 'ark',
     mode: argv.mode,
     output: {
-      publicPath: "/ark/",
-      filename: "[name].[contenthash].js",
-      path: path.join(__dirname, "/dist/ark"),
+      publicPath: '/ark/',
+      filename: '[name].[contenthash].js',
+      path: path.join(__dirname, '/dist/ark')
     },
     plugins: commonConfig.plugins.concat([
       new EnvironmentPlugin({
-        ARK_DESIGN: "ark",
-      }),
-    ]),
+        ARK_DESIGN: 'ark'
+      })
+    ])
   })
 
   const rootConfig = {
-    name: "root",
+    name: 'root',
     mode: argv.mode,
     entry: {
-      index: "./lib/showcase/index.js",
+      index: './lib/showcase/index.js'
     },
     plugins: [
       new CleanWebpackPlugin(),
       new DefinePlugin({
         PRODUCTION: !devMode,
-        VERSION: JSON.stringify(require("./package.json").version),
-        TARGET: JSON.stringify(target),
+        VERSION: JSON.stringify(require('./package.json').version),
+        TARGET: JSON.stringify(target)
       }),
       new CopyWebpackPlugin({
         patterns: [
-          { from: "lib/showcase/locales/", to: "locales/" }
-        ],
+          { from: 'lib/showcase/locales/', to: 'locales/' }
+        ]
       }),
       new HtmlWebpackPlugin({
-        title: "Componark",
-        template: "./lib/showcase/index.html",
-      }),
-    ],
+        title: 'Componark',
+        template: './lib/showcase/index.html'
+      })
+    ]
   }
 
   if (devMode) {
     rootConfig.devServer = {
       static: [
-        path.join(__dirname, "dist"),
-        path.join(__dirname, "dist/ark"),
+        path.join(__dirname, 'dist'),
+        path.join(__dirname, 'dist/ark')
       ],
       historyApiFallback: {
         rewrites: [
-          { from: /^\/$/, to: "/index.html" },
-          { from: /^\/ark/, to: "/ark/index.html" },
-        ],
+          { from: /^\/$/, to: '/index.html' },
+          { from: /^\/ark/, to: '/ark/index.html' }
+        ]
       },
-      port: 7890,
+      port: 7890
     }
   }
 

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "module": "commonjs",
-    "allowJs": true,
-    "checkJs": true,
-    "noEmit": true,
-    "noImplicitThis": false,
-    "noImplicitAny": false,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "baseUrl": "lib",
-    "paths": {
-      "@base*": [
-          "base"
-          "base*"
-      ],
-      "*": [
-        "*"
-      ]
-    }
-  }
-}