{"version":3,"sources":["lib/styleGuide/styleGuide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAoBnF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,WAAW;IACf,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,YAAY,EAAE,cAAc,EAAE,CAAM;IAEpC,MAAM,EAAE,cAAc,EAAE,CAAM;IAE9B,MAAM;CAQd;AAED,eAAO,MAAM,SAAS,aAAoB,CAAC;AAC3C,eAAe,SAAS,CAAC","file":"../../../lib/styleGuide/styleGuide.d.ts","sourcesContent":["import { html, render, TemplateResult } from '../../../../../lit-html/lit-html.js';\nimport { css, links } from './styleGuide.css.js';\n\n// TODO - service worker - import workbox\nlet container = null;\n\nconst template = (info: StyleHelper) => html`\n\n${\n  info.baseCss\n}\n${\n  info.componentCss\n}\n${\n  info.appCss\n}\n`;\n\n\n/**\n * Little CSS management helper dynamically adds\n * given render blocks (intended to be <style> blocks\n * form client components and applications) to the\n * head of a document.\n * Ex:\n *    ```\n * helper.componentCss.push( html`<style>...</style>` ); helper.render();\n *    ```\n * The helper renders the baseCss template results, then the componentCss,\n * and finally the appCss; so the idea is that:\n * - baseCss defines the base rules from the style guide\n * - componentCss defines extensions for styling each component\n * - appCss cascades application specific overrides and layout rules\n *\n * Note: StyleGuide.css.js includes an optional block of `<meta>` tags\n * that may be added to `helper.baseCss` if the html shell does\n * not already define the viewport and content-type.\n */\nexport class StyleHelper {\n  public baseCss: TemplateResult[] = [];\n\n  public componentCss: TemplateResult[] = [];\n\n  public appCss: TemplateResult[] = [];\n\n  public render() {\n    if (container === null) {\n      container = document.createElement('DIV');\n      container.setAttribute('id', 'lw-style-guide');\n      document.head.appendChild(container);\n    }\n    render(template(this), container);\n  }\n}\n\nexport const singleton = new StyleHelper();\nexport default singleton;\n\n// do not include 'meta' - shell usually handles that\n[links, css].forEach(\n  (block) => { singleton.baseCss.push(block); },\n);\n\nsingleton.render();\n"]}