{"version":3,"sources":["jsdelivr-header.js","/npm/x-typewriter@1.0.0/typewriter.js"],"names":[],"mappings":"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","file":"/npm/x-typewriter@1.0.0/typewriter.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.37.0.\n * Original file: /npm/x-typewriter@1.0.0/typewriter.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","/**\r\nDescription: Is a text effect web component. Whatever you put in the innerText will look like its being\r\ntype out.\r\n\r\nIt has two attributes that can be set:\r\n1) cursor - this could be a hortline, underline, block or none\r\n2) align - left, right or centered\r\n3) effect - standard or smooth\r\n\r\nUsage:\r\n<type-writer cursor=\"underline\" align=\"left\" effect=\"standard\">This is a test sentence</type-writer>\r\n\r\nNote: The innertext should only be as long as the width of its parent element for the effect \r\nto work correctly.  I have plans on adding multiple lines when I have time\r\n*/\r\n\r\nconst template = document.createElement('template');\r\ntemplate.innerHTML = `\r\n\r\n    <!---------- Style ------------>\r\n    <style>\r\n    \r\n        .base {\r\n            --x-width: 470px;\r\n            --y-height: 40px;\r\n            --y-heighthalf: 20px;\r\n            --y-heighteeigth: 5px;\r\n            --x-cursorcolor: rgba(0,255,0,.75);\r\n        }\r\n        \r\n        #outer {\r\n            text-align: left;\r\n        }\r\n        \r\n        #common {\r\n            display: inline-block;\r\n            height: var(--y-height);\r\n            white-space: nowrap;\r\n            overflow: hidden; \r\n            font-family: 'Source Code Pro', monospace;  \r\n            font-size: 28px;\r\n            color: rgba(255,255,255,.70);\r\n            position: relative;\r\n        }\r\n        \r\n        \r\n        #underline {\r\n              display: inline-block;\r\n              border-bottom: solid 3px rgba(0,255,0,.75);\r\n              position: absolute;\r\n              right: -7px;\r\n              width: var(--y-heighthalf);\r\n              animation: animated-cursor-underline 600ms steps(30,end) infinite;\r\n        }\r\n        \r\n        #line {\r\n              display: inline-block;\r\n              border-left: solid 3px rgba(0,255,0,.75);\r\n              position: absolute; \r\n              right: -12px; \r\n              width: var(--y-heighthalf);\r\n              animation: animated-cursor-line 600ms steps(29,end) infinite;\r\n        }\r\n        \r\n        #block {\r\n            display: inline-block;\r\n            position: absolute; \r\n            background-color: var(--x-cursorcolor); \r\n            right: -7px;\r\n            top: var(--y-heighteeigth);\r\n            height: calc(var(--y-heighthalf) + var(--y-heighteeigth));\r\n            width: var(--y-heighthalf);\r\n            animation: animated-cursor-block 600ms steps(29,end) infinite;\r\n        }\r\n        \r\n        @keyframes animated-text{\r\n            from{width: 0;}\r\n            to{width: var(--x-width);} \r\n        }\r\n\r\n        @keyframes animated-cursor-underline{\r\n            from{border-bottom-color: var(--x-cursorcolor);}\r\n            to{border-bottom-color: transparent;}\r\n        }\r\n        \r\n        @keyframes animated-cursor-line{\r\n            from{border-left-color: var(--x-cursorcolor);}\r\n            to{border-left-color: transparent;}\r\n        }\r\n            \r\n        @keyframes animated-cursor-block{\r\n            from{background-color: var(--x-cursorcolor);}\r\n            to{background-color: transparent;}\r\n        }\r\n           \r\n    </style>\r\n    \r\n    <!-------- HTML Template ------------->\r\n\r\n    <div id=\"outer\">\r\n    \r\n        <div class=\"base\" id=\"common\" cursor=\"line\" effect=\"standard\" align=\"left\" fontsize=\"22px\">\r\n            This is a typewriter effect.<div id=\"line\" inner>&nbsp</div>\r\n        </div>\r\n    \r\n    </div>\r\n`;\r\n\r\nclass TypeWriter extends HTMLElement {\r\n  /** Standard template for expanding an HTML element*/\r\n  constructor() {\r\n    super();\r\n    this._shadowRoot = this.attachShadow({ mode: 'open' });\r\n    this._shadowRoot.appendChild(template.content.cloneNode(true));\r\n    this._div = this._shadowRoot.querySelector('div.base');\r\n    this._underline = this._shadowRoot.querySelector('#underline');\r\n    this._line = this._shadowRoot.querySelector('#line');\r\n    this._block = this._shadowRoot.querySelector('#block');\r\n    this.sentence = this.innerHTML;\r\n    this.setHTML();\r\n    this._common = this._shadowRoot.querySelector(\"#common\");\r\n    this._border = this._shadowRoot.querySelector(\"div[inner]\");\r\n    this._outer = this._shadowRoot.querySelector(\"div#outer\");\r\n  }\r\n  \r\n  setHTML(){\r\n     /**\r\n    Set the innerHTML for the reveal div based on the innerHTML of custom tag\r\n    */ \r\n    this.sentence = this.sentence + \"<div id='line' inner>&nbsp</div>\";\r\n    this._div.innerHTML = this.sentence;\r\n  }\r\n  \r\n  get cursor() {\r\n    /**\r\n    Getter for the cursor attribute\r\n    */\r\n    return this.getAttribute('cursor');\r\n  }\r\n  \r\n  set cursor(newValue) {\r\n    /**\r\n    Setter for the cursor attribute\r\n    */\r\n    this.setAttribute('cursor', newValue);\r\n  }\r\n  \r\n  get align() {\r\n    /**\r\n    Getter for the align attribute\r\n    */\r\n    return this.getAttribute('align');\r\n  }\r\n  \r\n  set align(newValue) {\r\n    /**\r\n    Setter for the align attribute\r\n    */\r\n    this.setAttribute('align', newValue);\r\n  }\r\n  \r\n  get effect() {\r\n    /**\r\n    Getter for the effect attribute\r\n    */\r\n    return this.getAttribute('effect');\r\n  }\r\n  \r\n  set effect(newValue) {\r\n    /**\r\n    Setter for the effect attribute\r\n    */\r\n    this.setAttribute('effect', newValue);\r\n  }\r\n  \r\n  get fontsize() {\r\n    /**\r\n    Getter for the fontsize attribute\r\n    */\r\n    return this.getAttribute('fontsize');\r\n  }\r\n  \r\n  set fontsize(newValue) {\r\n    /**\r\n    Setter for the fontsize attribute\r\n    */\r\n    this.setAttribute('fontsize', newValue);\r\n  }\r\n  \r\n  get textcolor() {\r\n    /**\r\n    Getter for the textcolor attribute\r\n    */\r\n    return this.getAttribute('textcolor');\r\n  }\r\n  \r\n  set textcolor(newValue) {\r\n    /**\r\n    Setter for the textcolor attribute\r\n    */\r\n    this.setAttribute('textcolor', newValue);\r\n  }\r\n  \r\n  get cursorcolor() {\r\n    /**\r\n    Getter for the cursorcolor attribute\r\n    */\r\n    return this.getAttribute('cursorcolor');\r\n  }\r\n  \r\n  set cursorcolor(newValue) {\r\n    /**\r\n    Setter for the cursorcolor attribute\r\n    */\r\n    this.setAttribute('cursorcolor', newValue);\r\n  }\r\n  \r\n  getHeight() {\r\n    let h = this._outer.offsetHeight;\r\n    let hh = Math.round(h/2);\r\n    let he = Math.round(h/8);\r\n    this._div.style.setProperty('--y-height', h+\"px\");\r\n    this._div.style.setProperty('--y-heighthalf', hh+\"px\");\r\n    this._div.style.setProperty('--y-heighteeigth', he+\"px\");\r\n    alert(\"height - \" + h);\r\n  }\r\n  \r\n  getWidth(){\r\n    /**\r\n    Get the Width and Height for the Text and store it in variables\r\n    */\r\n    let w = this._div.offsetWidth;\r\n    this._div.style.setProperty('--x-width', w+\"px\");\r\n    let len1 = this._div.innerText.length\r\n    let lw = Math.round(w/len1);\r\n    var x = window.getComputedStyle(this._div).getPropertyValue('font-size');\r\n    x = parseInt(x);\r\n    let h = (w/len1)*1.4 *2;\r\n    let hh = Math.round(h/2);\r\n    let he = Math.round(h/8);\r\n    if(x<18){ hh += 3; }\r\n    this._div.style.setProperty('--y-height', h+\"px\");\r\n    this._div.style.setProperty('--y-heighthalf', hh+\"px\");\r\n    this._div.style.setProperty('--y-heighteeigth', he+\"px\");\r\n  }\r\n  \r\n  setCursorType(val){\r\n    /**\r\n    Set the id attribute for the Div that holds the cursor\r\n    */\r\n    if(val == 'line'){\r\n        this._border.setAttribute(\"id\", \"line\");\r\n    }\r\n    else if(val == 'underline'){\r\n        this._border.setAttribute(\"id\", \"underline\");\r\n    }\r\n    else if(val == 'block'){\r\n        this._border.setAttribute(\"id\", \"block\");\r\n    }\r\n    else{\r\n        this._border.setAttribute(\"id\", \"none\");\r\n    }\r\n    //alert('cursortype');\r\n  }\r\n  \r\n  setAlignType(val){\r\n    /**\r\n    Set the text alignment for the text\r\n    */\r\n    if(val == \"center\"){\r\n        this._outer.style.textAlign = \"center\";\r\n    }\r\n    else if(val == \"right\"){\r\n        this._outer.style.textAlign = \"right\";\r\n    }\r\n    else{\r\n        this._outer.style.textAlign = \"left\";\r\n    }\r\n  }\r\n  \r\n  setEffectType(val){\r\n    /**\r\n    Set the animation for the correct effect\r\n    */\r\n    if(val == \"smooth\"){\r\n        //this._div.style.animation = \"animated-text 4s linear 1s 1 normal both, animated-cursor3 600ms linear infinite\";\r\n        this._div.setAttribute(\"effect\", \"smooth\");\r\n        //this._div.style.animation = \"animated-text 4s linear 1s 1 normal both\";\r\n        //this._border.\r\n    }\r\n    else{\r\n        //this._div.style.animation = \"animated-text 4s steps(29,end) 1s 1 normal both, animated-cursor 600ms steps(29,end) infinite\";\r\n        this._div.setAttribute(\"effect\", \"standard\");\r\n        //this._div.style.animation = \"animated-text 4s steps(30,end) 1s 1 normal both\";\r\n    }\r\n  }\r\n  \r\n  setFont(val){\r\n    /**\r\n    Set the Font Size for the text\r\n    */\r\n    this._div.style.fontSize = val;\r\n  }\r\n  \r\n  setTextColor(val){\r\n    this._div.style.color = val;\r\n  }\r\n  \r\n  setCursorColor(val) {\r\n    let type = this._border.getAttribute(\"id\");\r\n    //alert(val);\r\n    this._div.style.setProperty('--x-cursorcolor', val);\r\n    if(type == \"line\"){\r\n        this._border.style.borderLeft = \"solid 3px \" + val;\r\n    }\r\n    else if(type == \"underline\"){\r\n        this._border.style.borderBottom = \"solid 3px \" + val; \r\n    }\r\n    else if(type == \"block\"){\r\n        this._border.style.backgroundColor = val;\r\n    }\r\n    else{\r\n        \r\n    }\r\n  }\r\n  \r\n  connectedCallback() {\r\n    this.getWidth();\r\n    let effect = this._div.getAttribute(\"effect\");\r\n    if(effect == \"smooth\"){\r\n        this._div.style.animation = \"animated-text 4s linear 1s 1 normal both\";\r\n    }\r\n    else{\r\n        this._div.style.animation = \"animated-text 4s steps(30,end) 1s 1 normal both\";\r\n    }\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    /** web component hook to tell which attribute change to watch for */\r\n    return ['cursor', 'align', 'effect', 'fontsize', 'textcolor', 'cursorcolor'];\r\n  }\r\n  \r\n  attributeChangedCallback(name, oldVal, newVal) {\r\n    /** web component callback when a watched attribure is changed */\r\n    if(name == 'cursor'){\r\n        this.setCursorType(newVal);\r\n    }\r\n    else if(name == 'align'){\r\n        this.setAlignType(newVal);\r\n    }\r\n    else if(name == 'effect'){\r\n        this.setEffectType(newVal);\r\n    }\r\n    else if(name == 'fontsize'){\r\n        this.setFont(newVal);\r\n    }\r\n    else if(name == 'textcolor'){\r\n        this.setTextColor(newVal);\r\n    }\r\n    else if(name == 'cursorcolor'){\r\n        this.setCursorColor(newVal);\r\n    }\r\n    else{\r\n        \r\n    }\r\n\r\n  }\r\n\r\n}\r\n\r\nwindow.customElements.define('type-writer', TypeWriter);\r\n"]}