examples/web-components-kitchen-sink/custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "demo-wc-card.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "demo-wc-card",
"declaration": {
"name": "DemoWcCard",
"module": "/src/stories/misc/to-update/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/typings.d.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/components/sb-button.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbButton",
"cssProperties": [
{
"description": "Controls the color of bar",
"name": "--sb-primary-color",
"default": "#1ea7fd"
}
],
"members": [
{
"kind": "field",
"name": "primary",
"type": {
"text": "boolean"
},
"description": "Set button in primary mode",
"privacy": "public",
"attribute": "primary"
},
{
"kind": "field",
"name": "backgroundColor",
"type": {
"text": "string | undefined"
},
"privacy": "public",
"attribute": "background-color"
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'small' | 'medium' | 'large'"
},
"default": "'medium'",
"privacy": "public",
"attribute": "size"
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"privacy": "public",
"attribute": "label",
"reflects": true
},
{
"kind": "method",
"name": "onClick",
"privacy": "private"
}
],
"events": [
{
"name": "sb-button:click",
"type": {
"text": "CustomEvent"
},
"description": "Custom event send when the button is clicked"
}
],
"attributes": [
{
"type": {
"text": "string"
},
"description": "Label of the button",
"name": "label",
"fieldName": "label"
},
{
"type": {
"text": "string"
},
"description": "Size of the button, can be \"small\", \"medium\" or \"large\"; default is \"medium\".",
"name": "size",
"fieldName": "size"
},
{
"type": {
"text": "string"
},
"description": "Color of the button's background",
"name": "backgroundColor"
},
{
"name": "primary",
"fieldName": "primary"
},
{
"name": "background-color",
"fieldName": "backgroundColor"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-button",
"summary": "This is a simple Storybook Button",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbButton",
"declaration": {
"name": "SbButton",
"module": "src/components/sb-button.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-button",
"declaration": {
"name": "SbButton",
"module": "src/components/sb-button.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/sb-header.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbHeader",
"members": [
{
"kind": "field",
"name": "user",
"type": {
"text": "{} | undefined"
},
"privacy": "public",
"attribute": "user",
"reflects": true
},
{
"kind": "method",
"name": "dispatchCustomEvent",
"privacy": "private",
"parameters": [
{
"name": "eventName",
"type": {
"text": "string"
}
}
]
},
{
"kind": "method",
"name": "logInOutButton",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "CustomEvent"
}
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on create account button",
"name": "sb-header:createAccount"
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on login button",
"name": "sb-header:login"
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on logout button",
"name": "sb-header:logout"
}
],
"attributes": [
{
"type": {
"text": "Object"
},
"description": "User of the app",
"name": "user",
"fieldName": "user"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-header",
"summary": "This is a simple Storybook Header",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbHeader",
"declaration": {
"name": "SbHeader",
"module": "src/components/sb-header.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-header",
"declaration": {
"name": "SbHeader",
"module": "src/components/sb-header.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/sb-page.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbPage",
"members": [
{
"kind": "field",
"name": "user",
"type": {
"text": "{} | undefined"
},
"privacy": "public",
"attribute": "user",
"reflects": true
}
],
"attributes": [
{
"type": {
"text": "Object"
},
"description": "User of the app",
"name": "user",
"fieldName": "user"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-page",
"summary": "This is a simple Storybook Page",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbPage",
"declaration": {
"name": "SbPage",
"module": "src/components/sb-page.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-page",
"declaration": {
"name": "SbPage",
"module": "src/components/sb-page.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/stories/misc/to-update/DemoWcCard.js",
"declarations": [
{
"kind": "class",
"description": "This is a container looking like a card with a back and front side you can switch",
"name": "DemoWcCard",
"cssProperties": [
{
"description": "Header font size",
"name": "--demo-wc-card-header-font-size"
},
{
"description": "Font color for front",
"name": "--demo-wc-card-front-color"
},
{
"description": "Font color for back",
"name": "--demo-wc-card-back-color"
}
],
"cssParts": [
{
"description": "Front of the card",
"name": "front"
},
{
"description": "Back of the card",
"name": "back"
}
],
"slots": [
{
"description": "This is an unnamed slot (the default slot)",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "toggle"
},
{
"kind": "field",
"name": "backSide",
"type": {
"text": "boolean"
},
"description": "Indicates that the back of the card is shown",
"default": "false",
"privacy": "public",
"attribute": "back-side",
"reflects": true
},
{
"kind": "field",
"name": "header",
"type": {
"text": "string"
},
"description": "Header message",
"default": "'Your Message'",
"privacy": "public",
"attribute": "header"
},
{
"kind": "field",
"name": "rows",
"type": {
"text": "array"
},
"description": "Data rows",
"default": "[]",
"privacy": "public",
"attribute": "rows"
}
],
"events": [
{
"name": "side-changed",
"type": {
"text": "CustomEvent"
},
"description": "Fires whenever it switches between front/back"
}
],
"attributes": [
{
"name": "back-side",
"fieldName": "backSide"
},
{
"name": "header",
"fieldName": "header"
},
{
"name": "rows",
"fieldName": "rows"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "demo-wc-card",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "DemoWcCard",
"declaration": {
"name": "DemoWcCard",
"module": "src/stories/misc/to-update/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/stories/misc/to-update/demoWcCardStyle.css.js",
"declarations": [
{
"kind": "variable",
"name": "demoWcCardStyle",
"default": "css`\n :host {\n display: block;\n position: relative;\n width: 250px;\n height: 200px;\n border-radius: 10px;\n transform-style: preserve-3d;\n transition: all 0.8s ease;\n }\n\n .header {\n font-weight: bold;\n font-size: var(--demo-wc-card-header-font-size, 16px);\n text-align: center;\n }\n\n .content {\n padding: 20px 10px 0 10px;\n flex-grow: 1;\n }\n\n .footer {\n display: flex;\n }\n\n dl {\n margin: 0;\n text-align: left;\n }\n\n dd {\n margin-left: 15px;\n }\n\n button {\n border-radius: 15px;\n width: 30px;\n height: 30px;\n background: #fff;\n border: 1px solid #ccc;\n color: #000;\n font-size: 21px;\n line-height: 27px;\n font-weight: bold;\n cursor: pointer;\n margin: 5px;\n }\n\n .note {\n flex-grow: 1;\n color: #666;\n font-size: 16px;\n font-weight: bold;\n text-align: left;\n padding-top: 15px;\n }\n\n :host([back-side]) {\n transform: rotateY(180deg);\n }\n\n #front,\n #back {\n position: absolute;\n width: 250px;\n box-sizing: border-box;\n box-shadow: #ccc 3px 3px 2px 1px;\n padding: 10px;\n display: flex;\n flex-flow: column;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 10px;\n backface-visibility: hidden;\n overflow: hidden;\n }\n\n #front {\n background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n color: var(--demo-wc-card-front-color, #000);\n }\n\n #back {\n background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n color: var(--demo-wc-card-back-color, #fff);\n text-align: center;\n transform: rotateY(180deg) translate3d(0px, 0, 1px);\n }\n\n #back .note {\n color: #fff;\n }\n`"
}
],
"exports": [
{
"kind": "js",
"name": "demoWcCardStyle",
"declaration": {
"name": "demoWcCardStyle",
"module": "src/stories/misc/to-update/demoWcCardStyle.css.js"
}
}
]
}
]
}