elycruz

document.body.innerHTML = `
<style>
  .with-overlay {
    display: inline-block;
    border: 1px solid;
  }

  .with-overlay {
    position: relative;
  }

elycruz

/**
 * Storing flags in one variable and checking for 
 * enabled/disabled states using
 * bitwise operators.
 * @author elycruz
 * @reference:
 * - https://www.youtube.com/watch?v=RRyxCmLX_ag
 * - https://www.youtube.com/watch?v=6hnLMnid1M0
 */

elycruz

const isset = x => x !== null && x !== undefined,

    {log, error} = console,
    
    xInputName = 'x-input',
    
    xInputStyles = `
:host {
    background-color: green;
}

elycruz

/**
 * Exploring animation keyframes with display `none` etc.
 */

document.body.innerHTML = `
<style>

@keyframes slide-in {
  0% {
    display: none;

elycruz

document.body.innerHTML = `
<style>
table {
  position: relative;
  overflow: auto;
}
table, td, th {
  border: 1px solid;
}
thead th {

elycruz

document.body.innerHTML = `
<style>
html, body {
    font-family: Arial, Verdana Helvetica, Sans-serif;
}

table {
    width: 80vw;
}

elycruz

class TN {
  constructor(assocList) {
    if (assocList) {
      assocList.forEach(([k, v]) => {
        this.set(k, v);  
      });
    }
  }
  
  set(k, v)) {

elycruz

export const
  getRowIndex = (itemIdx: number, itemsPerRow: number): number =>
    Math.round((itemIdx - (itemIdx % itemsPerRow)) / itemsPerRow),

  getColumnIndex = (itemIdx: number, itemsPerRow: number): number =>
    itemIdx % itemsPerRow
;

elycruz

/**
 *  Idea for assoc_list_helpers (for going to and fro associated lists on specific keys and as a whole) (untested, and/or incomplete implementations)
 */

const

    /**
     * Returns an associated list on incoming's object type.
     * @note Does deep conversion on all values of passed in type's type.
     * @note Useful for working with object primitive (json and the like).

elycruz

import {isset} from 'fjl';

const easings = {
    linear(t) {
        return t;
    },
    easeInQuad(t) {
        return t * t;
    },
    easeOutQuad(t) {