@knowark/componarkjs 1.7.3

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

@@ -0,0 +1,196 @@
+const css = String.raw; export default css`
+  .ark-paginator {
+    background: var(--canvas, white);
+    color: var(--ink, black);
+  }
+
+  /*-------------- THEME-------------- */
+
+  .ark-paginator[background=primary] {
+    background: var(--primary);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=primary] {
+    color: var(--primary);
+  }
+
+  .ark-paginator[background=secondary] {
+    background: var(--secondary);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=secondary] {
+    color: var(--secondary);
+  }
+
+  .ark-paginator[background=success] {
+    background: var(--success);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=success] {
+    color: var(--success);
+  }
+
+  .ark-paginator[background=danger] {
+    background: var(--danger);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=danger] {
+    color: var(--danger);
+  }
+
+  .ark-paginator[background=warning] {
+    background: var(--warning);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=warning] {
+    color: var(--warning);
+  }
+
+  .ark-paginator[background=info] {
+    background: var(--info);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=info] {
+    color: var(--info);
+  }
+
+  .ark-paginator[background=dark] {
+    background: var(--dark);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=dark] {
+    color: var(--dark);
+  }
+
+  .ark-paginator[background=muted] {
+    background: var(--muted);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=muted] {
+    color: var(--muted);
+  }
+
+  .ark-paginator[background=light] {
+    background: var(--light);
+    color: white;
+  }
+
+  .ark-paginator.ark-paginator[color=light] {
+    color: var(--light);
+  }
+
+  /*-------------------------------------------*/
+
+  .ark-paginator__body {
+    width: 100%;
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ark-paginator__footer {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+  }
+
+  .ark-paginator__footer small[data-info] {
+    color: var(--primary);
+  }
+
+  .ark-paginator__buttons {
+    margin: 10px;
+  }
+
+  .ark-paginator__buttons button {
+    width: 1.8rem;
+    height: 1.8rem;
+    border: 0;
+    margin: 0.1rem;
+    background: inherit;
+  }
+
+  .ark-paginator__buttons button:focus {
+    outline: none;
+  }
+
+  .ark-paginator__buttons button:active {
+    border: 1px solid black;
+  }
+
+  .ark-paginator__buttons button[on-click=_prev],
+  .ark-paginator__buttons button[on-click=_next] {
+    border: 2px solid rgba(128, 128, 128, 0.411);
+    background: white;
+  }
+
+  .ark-paginator__buttons button[on-click=_first],
+  .ark-paginator__buttons button[on-click=_last] {
+    border: 2px solid rgba(128, 128, 128, 0.411);
+    background: white;
+  }
+
+  .ark-paginator__pages {
+    display: grid;
+    grid-auto-flow: column;
+  }
+
+  .ark-paginator__pages button {
+    min-width: 1.8rem;
+    width: 1.8rem;
+    min-height: 1.8rem;
+    height: 1.8rem;
+    border: 1px solid var(--primary);
+    margin: 0.1rem;
+    text-align: center;
+  }
+
+  .ark-paginator__pages button:focus {
+    outline: none;
+  }
+
+  .ark-paginator__pages button[active] {
+    background: var(--primary, blue);
+    color: white;
+  }
+
+  .ark-paginator__buttons button {
+    border-radius: 4px;
+    transition: transform 0.1s ease-in-out;
+  }
+
+  .ark-paginator__buttons button:hover {
+    transform: scale(1.05);
+  }
+
+  .ark-paginator__pages {
+    display: grid;
+  }
+
+  .ark-paginator__pages button {
+    border-radius: 4px;
+    transition: transform 0.1s ease-in-out;
+  }
+
+  .ark-paginator__pages button:focus {
+    outline: none;
+  }
+
+  .ark-paginator__pages button[active] {
+    background: var(--primary, blue);
+    color: white;
+  }
+
+  .ark-paginator__pages button:hover {
+    transform: scale(1.05);
+  }
+`

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

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

package/lib/components/spinner/README.md

@@ -0,0 +1,41 @@
+SPINNER
+=======
+
+The ``ark-spinner`` creates an animated loading icon
+
+Examples
+--------
+
+**Spinner with size specified**
+
+```html
+    <ark-spinner size="1.5"></ark-spinner>
+```
+
+**Different types of spinners available**
+
+```html
+    <ark-spinner type="chase"></ark-spinner>
+    <ark-spinner type="rect"></ark-spinner>
+    <ark-spinner type="loader"></ark-spinner>
+    <ark-spinner type="bounce"></ark-spinner>
+```
+
+
+
+Attributes
+----------
+
+| Name  |  Type  | Default  |                                    Description                                     |
+| :---: | :----: | :------: | :--------------------------------------------------------------------------------: |
+| size  | string |   "1"    |       Sets the size, by scale, being 1 the normal size and 2 double the size       |
+| type  | string | "circle" | Specifies the style of the spinner ("circle", "chase", "rect", "loader", "bounce") |
+
+
+Properties
+----------
+
+| Name  |  Type  | Default  |                                    Description                                     |
+| :---: | :----: | :------: | :--------------------------------------------------------------------------------: |
+| size  | string |   "1"    |       Sets the size, by scale, being 1 the normal size and 2 double the size       |
+| type  | string | "circle" | Specifies the style of the spinner ("circle", "chase", "rect", "loader", "bounce") |

package/lib/components/spinner/components/spinner.js

@@ -0,0 +1,105 @@
+import { Component } from "../../../base/component/index.js"
+import styles from "../styles/index.js"
+
+const tag = "ark-spinner"
+export class Spinner extends Component {
+  init(context = {}) {
+    this.scale = context.scale || this.scale || "1"
+    this.type = context.type || this.type || "circle"
+
+    return super.init()
+  }
+
+  reflectedProperties() {
+    return ["scale", "type"]
+  }
+
+  render() {
+    this.innerHTML = /* html */ `
+      ${this.spinnerType(this.type)}
+    `
+    this.setScale(this.scale)
+    return super.render()
+  }
+
+  setScale(scale) {
+    this.style.setProperty('transform', `scale(${scale})`)
+  }
+
+  /** @returns {HTMLElement} */
+  get loader() {
+    return this.querySelector("[data-loader]")
+  }
+
+  spinnerType(type) {
+    let content = ""
+
+    if (type === 'circle') {
+      content = /*html*/ `
+      <div data-loader class="sk-fading-circle">
+        <div class="sk-circle1 sk-circle"></div>
+        <div class="sk-circle2 sk-circle"></div>
+        <div class="sk-circle3 sk-circle"></div>
+        <div class="sk-circle4 sk-circle"></div>
+        <div class="sk-circle5 sk-circle"></div>
+        <div class="sk-circle6 sk-circle"></div>
+        <div class="sk-circle7 sk-circle"></div>
+        <div class="sk-circle8 sk-circle"></div>
+        <div class="sk-circle9 sk-circle"></div>
+        <div class="sk-circle10 sk-circle"></div>
+        <div class="sk-circle11 sk-circle"></div>
+        <div class="sk-circle12 sk-circle"></div>
+      </div> 
+      `
+    } else if (type === 'chase') {
+      content = /*html*/ `
+      <div data-loader class="sk-chase">
+        <div class="sk-chase-dot"></div>
+        <div class="sk-chase-dot"></div>
+        <div class="sk-chase-dot"></div>
+        <div class="sk-chase-dot"></div>
+        <div class="sk-chase-dot"></div>
+        <div class="sk-chase-dot"></div>
+      </div>
+      `
+    } else if (type === 'rect') {
+      content = /*html*/ `
+      <div data-loader class="spinner">
+        <div class="rect1"></div>
+        <div class="rect2"></div>
+        <div class="rect3"></div>
+        <div class="rect4"></div>
+        <div class="rect5"></div>
+      </div>
+      `
+    } else if (type === 'loader') {
+      content = /* html */ `
+      <div data-loader class="lds-spinner">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      `
+    } else {
+      content = /* html */ `
+      <div data-loader class="bouncer">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>      
+      `
+    }
+
+    return content
+  }
+}
+Component.define(tag, Spinner, styles)

package/lib/components/spinner/components/spinner.test.js

@@ -0,0 +1,50 @@
+import './spinner.js'
+
+describe('Spinner', () => {
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /* html */ `
+      <ark-spinner></ark-spinner>
+    `
+    const spinner = container.querySelector('ark-spinner')
+
+    expect(spinner).toBeTruthy
+    expect(spinner).toBe(spinner.init())
+  })
+
+  it('Different types of spinner can be used', () => {
+    container.innerHTML = /* html */ `
+      <ark-spinner type="chase"></ark-spinner>
+      <ark-spinner type="rect"></ark-spinner>
+      <ark-spinner type="loader"></ark-spinner>
+      <ark-spinner type="bounce"></ark-spinner>
+    `
+    const spinner = container.querySelector('ark-spinner')
+    const loader = spinner.loader
+
+    expect(spinner.loader).toBeCalled
+  })
+
+  it('Can set the scale of the spinner', () => {
+    container.innerHTML = /* html */ `
+      <ark-spinner scale="2.5" type="chase"></ark-spinner>
+    `
+    const spinner = container.querySelector('ark-spinner')
+
+    expect(spinner.loader).toBeCalled
+    expect(spinner.style.transform.split(')')[0].split('(')[1]).toBe(
+      spinner.scale
+    )
+  })
+})

package/lib/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from './components/spinner.js'