scu-web-components 0.0.1

package/dist/chunks/chunk.SDGFQPKJ.js

@@ -0,0 +1,216 @@
+import{a as o,b as i,c as r,d as l}from"./chunk.4ZY2NNEB.js";import{c as e}from"./chunk.AYSMJBKP.js";var a=r`
+:host([size=medium]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.action {
+    @include size-medium-action-mixins.box;
+    @include size-medium-action-mixins.sizing;
+  }*/
+}
+:host([size=medium]) > *:not(:last-child) {
+  margin-bottom: var(--spacing-1);
+  --margin-bottom: var( --spacing-1 );
+}
+:host([size=medium]) .image-box {
+  width: 100%;
+  padding-bottom: 49.5169082126%;
+  position: relative;
+}
+:host([size=medium]) .image {
+  background-color: var(--color-grey-09-color);
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+}
+:host([size=medium]) .supertitle {
+  font-size: var(--type-text-semibold-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-semibold-font-family);
+  font-weight: var(--type-text-semibold-font-weight);
+  line-height: var(--type-text-semibold-line-height);
+  letter-spacing: var(--type-text-semibold-letter-spacing);
+  text-transform: var(--type-text-semibold-text-transform);
+  color: var(--color-primary-color);
+  align-self: stretch;
+}
+:host([size=medium]) .title {
+  font-size: var(--type-text-bold-07-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-bold-07-font-family);
+  font-weight: var(--type-text-bold-07-font-weight);
+  line-height: var(--type-text-bold-07-line-height);
+  letter-spacing: var(--type-text-bold-07-letter-spacing);
+  text-transform: var(--type-text-bold-07-text-transform);
+  color: var(--color-grey-02-color);
+  align-self: stretch;
+}
+:host([size=medium]) .description {
+  font-size: var(--type-text-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-font-family);
+  font-weight: var(--type-text-font-weight);
+  line-height: var(--type-text-line-height);
+  letter-spacing: var(--type-text-letter-spacing);
+  text-transform: var(--type-text-text-transform);
+  color: var(--color-grey-02-color);
+  align-self: stretch;
+}
+
+:host([size=small]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host([size=small]) > *:not(:last-child) {
+  margin-bottom: var(--spacing-1);
+  --margin-bottom: var( --spacing-1 );
+}
+:host([size=small]) .image-box {
+  width: 100%;
+  padding-bottom: 94.8186528497%;
+  position: relative;
+}
+:host([size=small]) .image {
+  background-color: var(--color-grey-09-color);
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+}
+:host([size=small]) .supertitle {
+  display: none;
+}
+:host([size=small]) .title {
+  font-size: var(--type-text-bold-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-bold-font-family);
+  font-weight: var(--type-text-bold-font-weight);
+  line-height: var(--type-text-bold-line-height);
+  letter-spacing: var(--type-text-bold-letter-spacing);
+  text-transform: var(--type-text-bold-text-transform);
+  color: var(--color-grey-02-color);
+  align-self: stretch;
+}
+:host([size=small]) .description {
+  display: none;
+}
+:host([size=small]) .action {
+  display: none;
+}
+
+:host {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host > *:not(:last-child) {
+  margin-bottom: calc(var(--spacing-1) * 1.5);
+  --margin-bottom: calc( var( --spacing-1 ) * 1.5 );
+}
+:host .image-box {
+  width: 100%;
+  padding-bottom: 52.358490566%;
+  position: relative;
+}
+:host .image {
+  background-color: var(--color-grey-09-color);
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+}
+:host .supertitle {
+  font-size: var(--type-text-semibold-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-semibold-font-family);
+  font-weight: var(--type-text-semibold-font-weight);
+  line-height: var(--type-text-semibold-line-height);
+  letter-spacing: var(--type-text-semibold-letter-spacing);
+  text-transform: var(--type-text-semibold-text-transform);
+  color: #773a91;
+  align-self: stretch;
+}
+:host .title {
+  font-size: var(--type-text-bold-09-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-bold-09-font-family);
+  font-weight: var(--type-text-bold-09-font-weight);
+  line-height: var(--type-text-bold-09-line-height);
+  letter-spacing: var(--type-text-bold-09-letter-spacing);
+  text-transform: var(--type-text-bold-09-text-transform);
+  color: var(--color-grey-02-color);
+  align-self: stretch;
+}
+:host .description {
+  font-size: var(--type-text-06-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-06-font-family);
+  font-weight: var(--type-text-06-font-weight);
+  line-height: var(--type-text-06-line-height);
+  letter-spacing: var(--type-text-06-letter-spacing);
+  text-transform: var(--type-text-06-text-transform);
+  color: var(--color-grey-02-color);
+  align-self: stretch;
+}
+:host .action {
+  background-color: #773a91;
+  border-radius: 4px 4px 4px 4px;
+  width: 120px;
+  height: 32px;
+}`;var t=class extends l{constructor(){super(...arguments);this.title="no title";this.superTitle="";this.size="large";this.description="";this.action="";this.imageUrl="";this.imageAlt=""}render(){return o`
+        <div class="image-box">
+          <div 
+            class="image"
+            role="img"
+            aria-label="${this.imageAlt}"
+            title="${this.imageAlt}"
+            style="background-image: url('${this.imageUrl}');">
+          </div>
+        </div>
+        ${this.superTitle?o`
+            <div class="supertitle">
+              ${this.superTitle}
+            </div>`:""}
+        <div class="title">
+          ${this.title}
+        </div>
+        ${this.description?o`
+            <div class="description">
+              ${this.description}
+            </div>`:""}
+        ${this.action?o`
+            <div class="action"></div>`:""}
+    `}};t.styles=a,e([i({type:String})],t.prototype,"title",2),e([i({type:String,attribute:"super-title"})],t.prototype,"superTitle",2),e([i({type:String})],t.prototype,"size",2),e([i({type:String})],t.prototype,"description",2),e([i({type:String})],t.prototype,"action",2),e([i({type:String,attribute:"image-url"})],t.prototype,"imageUrl",2),e([i({type:String,attribute:"image-alt"})],t.prototype,"imageAlt",2);export{t as a};
+//# sourceMappingURL=chunk.SDGFQPKJ.js.map

package/dist/chunks/chunk.SDGFQPKJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scw-card.scss", "../../src/scw-card/scw-card.ts"],
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([size=medium]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  /*.action {\n    @include size-medium-action-mixins.box;\n    @include size-medium-action-mixins.sizing;\n  }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n  margin-bottom: var(--spacing-1);\n  --margin-bottom: var( --spacing-1 );\n}\n:host([size=medium]) .image-box {\n  width: 100%;\n  padding-bottom: 49.5169082126%;\n  position: relative;\n}\n:host([size=medium]) .image {\n  background-color: var(--color-grey-09-color);\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n  position: absolute;\n  inset: 0;\n  background-position: center;\n  background-size: cover;\n}\n:host([size=medium]) .supertitle {\n  font-size: var(--type-text-semibold-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-semibold-font-family);\n  font-weight: var(--type-text-semibold-font-weight);\n  line-height: var(--type-text-semibold-line-height);\n  letter-spacing: var(--type-text-semibold-letter-spacing);\n  text-transform: var(--type-text-semibold-text-transform);\n  color: var(--color-primary-color);\n  align-self: stretch;\n}\n:host([size=medium]) .title {\n  font-size: var(--type-text-bold-07-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-bold-07-font-family);\n  font-weight: var(--type-text-bold-07-font-weight);\n  line-height: var(--type-text-bold-07-line-height);\n  letter-spacing: var(--type-text-bold-07-letter-spacing);\n  text-transform: var(--type-text-bold-07-text-transform);\n  color: var(--color-grey-02-color);\n  align-self: stretch;\n}\n:host([size=medium]) .description {\n  font-size: var(--type-text-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-font-family);\n  font-weight: var(--type-text-font-weight);\n  line-height: var(--type-text-line-height);\n  letter-spacing: var(--type-text-letter-spacing);\n  text-transform: var(--type-text-text-transform);\n  color: var(--color-grey-02-color);\n  align-self: stretch;\n}\n\n:host([size=small]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n:host([size=small]) > *:not(:last-child) {\n  margin-bottom: var(--spacing-1);\n  --margin-bottom: var( --spacing-1 );\n}\n:host([size=small]) .image-box {\n  width: 100%;\n  padding-bottom: 94.8186528497%;\n  position: relative;\n}\n:host([size=small]) .image {\n  background-color: var(--color-grey-09-color);\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n  position: absolute;\n  inset: 0;\n  background-position: center;\n  background-size: cover;\n}\n:host([size=small]) .supertitle {\n  display: none;\n}\n:host([size=small]) .title {\n  font-size: var(--type-text-bold-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-bold-font-family);\n  font-weight: var(--type-text-bold-font-weight);\n  line-height: var(--type-text-bold-line-height);\n  letter-spacing: var(--type-text-bold-letter-spacing);\n  text-transform: var(--type-text-bold-text-transform);\n  color: var(--color-grey-02-color);\n  align-self: stretch;\n}\n:host([size=small]) .description {\n  display: none;\n}\n:host([size=small]) .action {\n  display: none;\n}\n\n:host {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n:host > *:not(:last-child) {\n  margin-bottom: calc(var(--spacing-1) * 1.5);\n  --margin-bottom: calc( var( --spacing-1 ) * 1.5 );\n}\n:host .image-box {\n  width: 100%;\n  padding-bottom: 52.358490566%;\n  position: relative;\n}\n:host .image {\n  background-color: var(--color-grey-09-color);\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n  position: absolute;\n  inset: 0;\n  background-position: center;\n  background-size: cover;\n}\n:host .supertitle {\n  font-size: var(--type-text-semibold-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-semibold-font-family);\n  font-weight: var(--type-text-semibold-font-weight);\n  line-height: var(--type-text-semibold-line-height);\n  letter-spacing: var(--type-text-semibold-letter-spacing);\n  text-transform: var(--type-text-semibold-text-transform);\n  color: #773a91;\n  align-self: stretch;\n}\n:host .title {\n  font-size: var(--type-text-bold-09-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-bold-09-font-family);\n  font-weight: var(--type-text-bold-09-font-weight);\n  line-height: var(--type-text-bold-09-line-height);\n  letter-spacing: var(--type-text-bold-09-letter-spacing);\n  text-transform: var(--type-text-bold-09-text-transform);\n  color: var(--color-grey-02-color);\n  align-self: stretch;\n}\n:host .description {\n  font-size: var(--type-text-06-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-06-font-family);\n  font-weight: var(--type-text-06-font-weight);\n  line-height: var(--type-text-06-line-height);\n  letter-spacing: var(--type-text-06-letter-spacing);\n  text-transform: var(--type-text-06-text-transform);\n  color: var(--color-grey-02-color);\n  align-self: stretch;\n}\n:host .action {\n  background-color: #773a91;\n  border-radius: 4px 4px 4px 4px;\n  width: 120px;\n  height: 32px;\n}`;\n", "import {html, LitElement, property} from 'lit-element';\nimport styles from './scw-card.scss';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n */\nexport default class ScwCard extends LitElement {\n  static styles = styles;\n\n  /**\n   * Main title or header of the card\n   * @type {string}\n   */\n   @property({type: String}) title: string = 'no title';\n\n   /**\n   * Super title, describing a category or area pertaining to title\n   * @type {string}\n   */\n  @property({\n    type: String,\n    attribute: 'super-title',\n  }) superTitle: string = '';\n\n  /**\n   * Size of the card (large, medium, small)\n   * @type {string}\n   */\n   @property({type: String}) size: string = 'large';\n\n   /**\n   * Fuller description of what the card is about\n   * @type {string}\n   */\n  @property({type: String}) description: string = '';\n\n  /**\n   * Label for the action button to be taken\n   * @type {string}\n   */\n   @property({type: String}) action: string = '';\n\n   /**\n   * The url of the image within the card\n   * @type {string}\n   */\n   @property({\n     type: String,\n     attribute: 'image-url',\n   }) imageUrl: string = '';\n\n   /**\n   * Alternative description of the image.\n   * @type {string}\n   */\n    @property({\n      type: String,\n      attribute: 'image-alt',\n    }) imageAlt: string = '';\n\n    /**\n   * render\n   * @return {object} component DOM\n   */\n    render() : object {\n      return html`\n        <div class=\"image-box\">\n          <div \n            class=\"image\"\n            role=\"img\"\n            aria-label=\"${this.imageAlt}\"\n            title=\"${this.imageAlt}\"\n            style=\"background-image: url('${this.imageUrl}');\">\n          </div>\n        </div>\n        ${this.superTitle ?\n          html`\n            <div class=\"supertitle\">\n              ${this.superTitle}\n            </div>` : '' }\n        <div class=\"title\">\n          ${this.title}\n        </div>\n        ${this.description ?\n          html`\n            <div class=\"description\">\n              ${this.description}\n            </div>` : '' }\n        ${this.action ?\n          html`\n            <div class=\"action\"></div>` : '' }\n    `;\n    }\n}\n"],
+  "mappings": "qGACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCOf,mBAAqC,EAAW,CAAhD,aARA,CAQA,oBAO6B,WAAgB,WASxC,gBAAqB,GAMG,UAAe,QAMhB,iBAAsB,GAMrB,YAAiB,GASxC,cAAmB,GASlB,cAAmB,GAMtB,QAAkB,CAChB,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,KAAK;AAAA,qBACV,KAAK;AAAA,4CACkB,KAAK;AAAA;AAAA;AAAA,UAGvC,KAAK,WACL;AAAA;AAAA,gBAEM,KAAK;AAAA,oBACC;AAAA;AAAA,YAEV,KAAK;AAAA;AAAA,UAEP,KAAK,YACL;AAAA;AAAA,gBAEM,KAAK;AAAA,oBACC;AAAA,UACZ,KAAK,OACL;AAAA,wCACgC;AAAA,QAnFjC,AADT,EACS,OAAS,EAMW,GAAzB,EAAS,CAAC,KAAM,UAAS,AAP7B,EAO6B,qBASxB,GAHF,EAAS,CACR,KAAM,OACN,UAAW,iBACV,AAhBL,EAgBK,0BAMwB,GAAzB,EAAS,CAAC,KAAM,UAAS,AAtB7B,EAsB6B,oBAMD,GAAzB,EAAS,CAAC,KAAM,UAAS,AA5B5B,EA4B4B,2BAMC,GAAzB,EAAS,CAAC,KAAM,UAAS,AAlC7B,EAkC6B,sBASvB,GAHF,EAAS,CACR,KAAM,OACN,UAAW,eACV,AA3CN,EA2CM,wBASC,GAHF,EAAS,CACR,KAAM,OACN,UAAW,eACV,AApDP,EAoDO",
+  "names": []
+}

package/dist/chunks/chunk.ZJVMOWGT.js

@@ -0,0 +1,29 @@
+import{a as r,b as o,c as i,d as n}from"./chunk.4ZY2NNEB.js";import{c as e}from"./chunk.AYSMJBKP.js";var l=i`
+:host {
+  display: block;
+  padding: 25px;
+  color: var(--scw-test-text-color, #000);
+  font-family: "Roboto", "Impact";
+}
+
+:host {
+  background-color: var(--color-information-dark-color);
+  --background-color: var( --color-information-dark-color );
+}
+
+h2 {
+  color: white;
+  background: brown;
+  font-size: var(--type-text-semibold-09-font-size);
+  text-align: LEFT;
+  font-family: var(--type-text-semibold-09-font-family);
+  font-weight: var(--type-text-semibold-09-font-weight);
+  line-height: var(--type-text-semibold-09-line-height);
+  letter-spacing: var(--type-text-semibold-09-letter-spacing);
+  text-transform: var(--type-text-semibold-09-text-transform);
+}`;var t=class extends n{constructor(){super(...arguments);this.title="Title";this.counter=5;this.underwears=5}__increment(){this.counter+=1}render(){return r`
+       <h1>title: ${this.title} number: ${this.counter}! sss</h1>
+       <button @click=${this.__increment}>increment</button>
+       <slot></slot>
+     `}};t.styles=l,e([o({type:String})],t.prototype,"title",2),e([o({type:Number})],t.prototype,"counter",2),e([o({type:Number})],t.prototype,"underwears",2);export{t as a};
+//# sourceMappingURL=chunk.ZJVMOWGT.js.map

package/dist/chunks/chunk.ZJVMOWGT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-test/scw-test.scss", "../../src/scw-test/scw-test.ts"],
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  display: block;\n  padding: 25px;\n  color: var(--scw-test-text-color, #000);\n  font-family: \"Roboto\", \"Impact\";\n}\n\n:host {\n  background-color: var(--color-information-dark-color);\n  --background-color: var( --color-information-dark-color );\n}\n\nh2 {\n  color: white;\n  background: brown;\n  font-size: var(--type-text-semibold-09-font-size);\n  text-align: LEFT;\n  font-family: var(--type-text-semibold-09-font-family);\n  font-weight: var(--type-text-semibold-09-font-weight);\n  line-height: var(--type-text-semibold-09-line-height);\n  letter-spacing: var(--type-text-semibold-09-letter-spacing);\n  text-transform: var(--type-text-semibold-09-text-transform);\n}`;\n", "import {html, LitElement, property} from 'lit-element';\nimport styles from './scw-test.scss';\n\n/**\n * ScwTest a first LitElement web component\n * @class\n * @tag scw-test\n *\n * @slot content - Main content area.\n * @slot header - header content area.\n *\n * @event scw-example - an example event\n * @event scw-example-2 - another example event\n *\n * @cssprop --example-css-var - an example of css props\n * @cssprop --example-css-var-2 - another example\n */\nexport default class ScwTest extends LitElement {\n  static styles = styles;\n\n  /**\n   * Just a title\n   * @type {string}\n   */\n   @property({type: String}) title: string = 'Title';\n\n   /**\n    * Just a counter\n    * @type {number}\n    */\n   @property({type: Number}) counter: number = 5;\n\n   /**\n    * Just a underwears\n    * @type {number}\n    */\n   @property({type: Number}) underwears: number = 5;\n\n   /**\n    * Private counter incrementer\n    */\n   __increment() {\n     this.counter += 1;\n   }\n\n   /**\n    * render\n    * @return {object} component DOM\n    */\n   render(): object {\n     return html`\n       <h1>title: ${this.title} number: ${this.counter}! sss</h1>\n       <button @click=${this.__increment}>increment</button>\n       <slot></slot>\n     `;\n   }\n}\n"],
+  "mappings": "qGACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCgBf,mBAAqC,EAAW,CAAhD,aAjBA,CAiBA,oBAO6B,WAAgB,QAMhB,aAAkB,EAMlB,gBAAqB,EAK/C,aAAc,CACZ,KAAK,SAAW,EAOlB,QAAiB,CACf,MAAO;AAAA,oBACQ,KAAK,iBAAiB,KAAK;AAAA,wBACvB,KAAK;AAAA;AAAA,SAlCpB,AADT,EACS,OAAS,EAMW,GAAzB,EAAS,CAAC,KAAM,UAAS,AAP7B,EAO6B,qBAMA,GAAzB,EAAS,CAAC,KAAM,UAAS,AAb7B,EAa6B,uBAMA,GAAzB,EAAS,CAAC,KAAM,UAAS,AAnB7B,EAmB6B",
+  "names": []
+}