diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..e34f5f3 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/ diff --git a/LICENSE b/LICENSE index 2071b23..f936bdb 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) +Copyright (c) 2023 Björn Hase, me@herr-hase.wtf Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/assets-manifest.json b/assets-manifest.json new file mode 100644 index 0000000..d679106 --- /dev/null +++ b/assets-manifest.json @@ -0,0 +1,6 @@ +{ + "/example/js/spritemap.js": "/example/js/spritemap.js?version=22bf6eef7ae5effb5e483e6c4f01c12b", + "/example/symbol-defs.svg": "/example/symbol-defs.svg?version=286109f83fb513b8a93efe3ce8275708", + "/example/js/example.js": "/example/js/example.js?version=e3d5dbb49383f6e183c2fdca71293467", + "/example/css/styles.css": "/example/css/styles.css?version=4156c7f9ece84034a6422042a7b5ad7a" +} \ No newline at end of file diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..b8e3e58 Binary files /dev/null and b/bun.lockb differ diff --git a/bunfig.toml b/bunfig.toml new file mode 100644 index 0000000..8295169 --- /dev/null +++ b/bunfig.toml @@ -0,0 +1,2 @@ +[install.scopes] +"@tiny-components" = "https://git.node001.net/api/packages/tiny-components/npm/" diff --git a/example/IBMPlexMono-Bold.eot b/example/css/IBMPlexMono-Bold.eot similarity index 100% rename from example/IBMPlexMono-Bold.eot rename to example/css/IBMPlexMono-Bold.eot diff --git a/example/IBMPlexMono-Bold.ttf b/example/css/IBMPlexMono-Bold.ttf similarity index 100% rename from example/IBMPlexMono-Bold.ttf rename to example/css/IBMPlexMono-Bold.ttf diff --git a/example/IBMPlexMono-Bold.woff b/example/css/IBMPlexMono-Bold.woff similarity index 100% rename from example/IBMPlexMono-Bold.woff rename to example/css/IBMPlexMono-Bold.woff diff --git a/example/IBMPlexMono-Bold.woff2 b/example/css/IBMPlexMono-Bold.woff2 similarity index 100% rename from example/IBMPlexMono-Bold.woff2 rename to example/css/IBMPlexMono-Bold.woff2 diff --git a/example/IBMPlexMono.eot b/example/css/IBMPlexMono.eot similarity index 100% rename from example/IBMPlexMono.eot rename to example/css/IBMPlexMono.eot diff --git a/example/IBMPlexMono.ttf b/example/css/IBMPlexMono.ttf similarity index 100% rename from example/IBMPlexMono.ttf rename to example/css/IBMPlexMono.ttf diff --git a/example/IBMPlexMono.woff b/example/css/IBMPlexMono.woff similarity index 100% rename from example/IBMPlexMono.woff rename to example/css/IBMPlexMono.woff diff --git a/example/IBMPlexMono.woff2 b/example/css/IBMPlexMono.woff2 similarity index 100% rename from example/IBMPlexMono.woff2 rename to example/css/IBMPlexMono.woff2 diff --git a/example/css/styles.css b/example/css/styles.css new file mode 100644 index 0000000..e299f68 --- /dev/null +++ b/example/css/styles.css @@ -0,0 +1,2309 @@ +/*!**********************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/example/styles.scss ***! + \**********************************************************************************************************************************************/ +@charset "UTF-8"; +@font-face { + font-family: "IBM Plex Mono"; + src: url("IBMPlexMono.eot"); + src: url("IBMPlexMono.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono.woff2") format("woff2"), url("IBMPlexMono.woff") format("woff"), url("IBMPlexMono.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "IBM Plex Mono"; + src: url("IBMPlexMono-Bold.eot"); + src: url("IBMPlexMono-Bold.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono-Bold.woff2") format("woff2"), url("IBMPlexMono-Bold.woff") format("woff"), url("IBMPlexMono-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + font-display: swap; +} +/** + * functions + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * strip unit from value + * + * @param {mixed} $value + * @return {number} + * + */ +/** + * + * + * https://css-tricks.com/snippets/sass/str-replace-function/ + * + */ +/** + * get value of key "default" in map + * + * @param {map} $value + * @return {boolean|unit} + * + */ +/** + * factor + * + * + * + * @param {integer} $x + * @return {float} + * + */ +/** + * mixins + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * Clear Floats + * + * + * + */ +/** + * clear styles from list + * + * + */ +/** + * media-queries as mixins + * based on breakpoints from variables + * + * + * + */ +/** + * Set property and his value for each Breakpoint + * + * ( + * $md: 10px + * ) + * + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set property and his value with an factor for each Breakpoint + * + * ( + * $md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size + * + * ( + * $md: 1rem + * ) + * + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] + * + */ +/** + * adding overlay with z-index and color + * + * @param {z-index} + * @param {color} + * + */ +/** + * variables + * + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * grid + * + */ +:root { + --grid-columns: 12; + --grid-grid-spacing: 15px; + --grid-xs: 576px; + --grid-sm: 768px; + --grid-md: 992px; + --grid-lg: 1200px; + --grid-xlg: 1600px; + --grid-xxs-max: 575px; + --grid-xs-max: 767px; + --grid-sm-max: 991px; + --grid-md-max: 1199px; + --grid-lg-max: 1599px; +} + +/** + * fonts + * + */ +/** + * colors + * + * + */ +/** + * margin + * + */ +/** + * padding + * + */ +/** + * border + * + */ +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +:root { + --body: #f9f9f9; + --text: #363636; + --text-contrast: #ffffff; + --primary: #3e3e3e; + --primary-contrast: #3e3e3e; + --active: #717171; + --active-contrast: #ffffff; + --link: #363636; + --link-hover: #d95959; + --danger: #d95959; + --danger-contrast: #ecacac; + --info: #0090d4; + --info-constrast: #3bc0ff; + --success: #64ac64; + --success-contrast: #a6d0a6; + --warning: #f0ad4e; + --warning-contrast: #f8d9ac; + --background: #3e3e3e; + --background-contrast: #ffffff; + --background-alpha: rgba(0, 0, 0, 0.7); + --border: #3e3e3e; + --border-contrast: #ffffff; + --font-family: IBM Plex Mono, sans-serif; +} + +html { + font-size: 100%; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +body, +html { + margin: 0; + height: 100%; +} + +html, +legend { + box-sizing: border-box; +} + +body { + font-family: var(--font-family); + color: var(--text); + background-color: var(--body); + direction: ltr; + font-size: 0.9rem; + line-height: 1.618; +} +@media only screen and (min-width: 992px) { + body { + font-size: 1rem; + } +} + +a { + color: var(--link); + transition: color 0.5s; + text-decoration: none; +} +a:hover { + color: var(--link-hover); +} +a:focus { + outline: none; +} + +main { + display: block; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +figure { + margin: 0; +} + +figcaption { + margin: 0; +} + +p { + margin: 0; +} + +/** + * form elements + * + * + */ +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +fieldset { + margin: 0 0 1rem; +} + +button, +select { + text-transform: none; +} + +[type=button], +[type=reset], +[type=submit], +button { + -webkit-appearance: button; +} + +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} + +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/** + * hr + * + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + border-top: 1px solid var(--border); + margin: 0 0 1rem; +} + +progress { + vertical-align: baseline; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +code, +kbd, +pre, +samp { + font-family: var(--font-family); + font-size: 0.9rem; +} + +/** + * Content + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.content { + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + /** + * blockquote + * + * + */ + /** + * lists + * + */ +} +.content p { + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content p { + margin: 0 0 1.2rem; + } +} +.content a, +.content ins, +.content u { + text-decoration-skip: ink edges; +} +.content a { + text-decoration: underline; +} +.content b, +.content strong { + font-weight: bolder; +} +.content small { + font-size: 80%; +} +.content sub, +.content sup { + font-size: 70%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.content sub { + bottom: -0.25em; +} +.content sup { + top: -0.5em; +} +.content abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} +.content mark { + padding: 0.25rem; + background-color: var(--warning); +} +.content blockquote { + border-left: 1px solid var(--border); + margin-left: 0; + padding: 0.6rem 0.8rem; +} +.content blockquote p:last-child { + margin-bottom: 0; +} +.content dl, +.content ol, +.content ul { + padding: 0; + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content dl, + .content ol, + .content ul { + margin: 0 0 1.2rem; + } +} +.content ul { + margin-left: 1.5rem; +} +.content ol { + margin-left: 2.5rem; +} +.content ol ol, +.content ul ul { + margin-top: 0; + margin-left: 1.5rem; +} +.content ol { + list-style: decimal outside; +} +.content ul { + list-style: square outside; +} +.content dl { + margin-left: 0.5rem; +} +.content dd, +.content dt { + margin: 0; +} +.content dt { + font-weight: bold; +} +.content code { + white-space: pre; + display: block; + color: var(--text-contrast); + overflow-y: hidden; + overflow-x: auto; + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background); + margin: 0 0 1rem; + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .content code { + margin: 0 0 1.2rem; + } +} +@media only screen and (min-width: 992px) { + .content code { + padding: 0.7rem 1rem 0.9rem; + } +} + +.highlight { + padding: 0.15rem 0.4rem 0.25rem; + background: var(--primary); + color: var(--text-contrast); + border-radius: 2px; +} + +/** + * Heading + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * add font-size for heading as class and element + * + * + */ +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "IBM Plex Mono", sans-serif; + font-weight: bold; + line-height: 1.2; + margin: 0 0 1rem; +} +h1.highlight, .h1.highlight, +h2.highlight, .h2.highlight, +h3.highlight, .h3.highlight, +h4.highlight, .h4.highlight, +h5.highlight, .h5.highlight, +h6.highlight, .h6.highlight { + display: table; +} + +h1, .h1 { + font-size: 2.5rem; +} + +h2, .h2 { + font-size: 2rem; +} + +h3, .h3 { + font-size: 1.75rem; +} + +h4, .h4 { + font-size: 1.5rem; +} + +h5, .h5 { + font-size: 1.25rem; +} + +h6, .h6 { + font-size: 1rem; +} + +@media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 2.75rem; + } + h2, .h2 { + font-size: 2.5rem; + } + h3, .h3 { + font-size: 2rem; + } + h4, .h4 { + font-size: 1.75rem; + } + h5, .h5 { + font-size: 1.5rem; + } + h6, .h6 { + font-size: 1.2rem; + } +} +/** + * + * A + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.badge { + display: inline-block; + background-color: var(--background); + color: var(--text-contrast); + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + border: 1px solid var(--border); + border-radius: 2px; +} +.badge--round { + display: inline-flex; + justify-content: center; + border-radius: 50%; + width: 2.8em; +} + +/** + * Button + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * + * + */ +/** + * + * + */ +/** + * + * + */ +.button { + appearance: none; + position: relative; + display: inline-flex; + align-items: center; + text-decoration: none; + font-family: var(--font-family); + font-size: 1rem; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--text); + border-radius: 2px; + transition: background-color 0.1s; + margin: 0 0 1rem; + padding: 0.5rem 1.3rem; + width: 100%; +} +@media only screen and (min-width: 768px) { + .button { + width: auto; + } +} +.button--small { + padding: 0.3rem 1.1rem; + font-size: 0.8rem; +} +.button:hover, .button--selected { + cursor: pointer; + text-decoration: none; + color: white; + background-color: var(--active); +} +.button:focus, .button:active { + outline: 1px solid var(--active); +} +.button:disabled { + opacity: 0.5; +} +.button:disabled:hover { + cursor: not-allowed; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--border); +} +.button--transparent { + margin: 0; + padding: 0; + border: none; + background: transparent; + border-radius: 0; +} +.button--transparent:focus, .button--transparent:active { + outline: none; +} +.button--danger { + border-color: var(--danger); +} +.button--danger:hover { + background-color: var(--danger); +} +.button--danger:focus, .button--danger:active { + outline: 2px solid var(--danger); +} +.button--info { + border-color: var(--info); +} +.button--info:hover { + background-color: var(--info); +} +.button--info:focus, .button--info:active { + outline: 2px solid var(--info); +} +.button--warning { + border-color: var(--warning); +} +.button--warning:hover { + background-color: var(--warning); +} +.button--warning:focus, .button--warning:active { + outline: 2px solid var(--warning); +} +.button--success { + border-color: var(--success); +} +.button--success:hover { + background-color: var(--success); +} +.button--success:focus, .button--success:active { + outline: 2px solid var(--success); +} +.button--outline { + background-color: transparent; +} +.button--outline:hover { + color: var(--border); + border-color: #a4a4a4; + background-color: transparent; +} +.button--danger.button--outline:hover { + border-color: #ecacac; +} +.button--info.button--outline:hover { + border-color: #3bc0ff; +} +.button--warning.button--outline:hover { + border-color: #f8d9ac; +} +.button--success.button--outline:hover { + border-color: #a6d0a6; +} +.button--full { + background-color: var(--active); + color: white; +} +.button--full:hover { + background-color: var(--background-contrast); + color: var(--text); +} +.button--danger.button--full { + background-color: var(--danger); +} +.button--danger.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--danger); +} +.button--danger.button--full:focus, .button--danger.button--full:active { + outline: 2px solid var(--danger); +} +.button--info.button--full { + background-color: var(--info); +} +.button--info.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--info); +} +.button--info.button--full:focus, .button--info.button--full:active { + outline: 2px solid var(--info); +} +.button--warning.button--full { + background-color: var(--warning); +} +.button--warning.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--warning); +} +.button--warning.button--full:focus, .button--warning.button--full:active { + outline: 2px solid var(--warning); +} +.button--success.button--full { + background-color: var(--success); +} +.button--success.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--success); +} +.button--success.button--full:focus, .button--success.button--full:active { + outline: 2px solid var(--success); +} + +/** + * + * fields + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.field-group { + margin: 0 0 1rem; +} +.field-group--valid .field-text { + border-color: var(--success); +} +.field-group--valid .icon { + fill: var(--success); +} +.field-group--error .field-text { + border-color: var(--danger); +} +.field-group--error .icon { + fill: var(--danger); +} + +.field-label { + font-size: 1rem; + font-family: var(--font-family); +} +.field-label .icon { + vertical-align: text-bottom; +} +.field-label:hover { + cursor: pointer; +} + +.field-text, .field-choice { + font-family: var(--font-family); + font-size: 0.95rem; + width: 100%; + border: 1px solid #a4a4a4; + border-radius: 2px; + margin: 0.7rem 0 0; +} +.field-text:focus, .field-text:active, .field-choice:focus, .field-choice:active { + outline: 0; + border-color: var(--border); +} + +.field-text { + padding: 0.8em 1.1em; +} + +textarea.field-text { + height: 180px; +} + +/** + * field-choice + * + * + */ +.field-choice { + appearance: none; + padding: 0.8em; + background-image: linear-gradient(to right, #717171, #717171); + background-position: 100%; + background-size: 1.5rem 100%; + background-repeat: no-repeat; +} +.field-choice:active, .field-choice:focus { + background-image: linear-gradient(to right, #3e3e3e, #3e3e3e); +} + +/** + * radio & checkbox + * + *
+ * + *
+ * + */ +[type=checkbox].field-choice, +[type=radio].field-choice { + position: relative; + display: none; +} +[type=checkbox].field-choice ~ .field-choice__checked, +[type=radio].field-choice ~ .field-choice__checked { + display: none; +} +[type=checkbox].field-choice:checked ~ .field-choice__checked, +[type=radio].field-choice:checked ~ .field-choice__checked { + display: inline-block; +} +[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +[type=radio].field-choice:checked ~ .field-choice__unchecked { + display: none; +} + +svg.field-choice__unchecked { + fill: var(--active); +} + +svg.field-choice__checked { + fill: var(--success); +} + + .field-error { + display: inline-block; + width: 100%; + padding: 0.6em 0.5em; + font-size: 0.8rem; +} + +/** + * + * + */ +.field-switch { + position: relative; + display: inline-block; + width: 75px; + height: 35px; + border: 1px solid var(--border); + border-radius: 2px; +} +.field-switch:after { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + content: ""; + border: 1px solid var(--border); + border-color: var(--border-contrast); + border-radius: 2px; + background-color: var(--active); + transition: transform 0.25s; +} + +[type=checkbox].field-choice ~ .field-switch:after { + left: 0; +} +[type=checkbox].field-choice:checked ~ .field-switch { + border-color: var(--success); +} +[type=checkbox].field-choice:checked ~ .field-switch:after { + background-color: var(--success); + transform: translateX(100%); +} + +/** + * display error for fields + * + */ +.field-error { + color: var(--danger); +} + +/** + * + *
+ * + * A + * + *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.group__item { + width: auto; + display: inline-block; + margin: 0 0 1rem; + margin-right: 0.25rem; +} +.group__item:last-child { + margin-right: 0; +} + +/** + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.icon { + width: 1em; + height: 1em; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + overflow: hidden; + font-size: 1.4rem; + fill: var(--text); +} + +/** + *
+ * image + *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.hero { + position: relative; +} +.hero img { + width: 100%; + object-fit: cover; + object-position: 50% 50%; +} + +/** + * + * tabs + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.tabs { + display: flex; + flex-direction: column; + width: 100%; + border-bottom: 1px solid var(--border); +} +@media only screen and (min-width: 768px) { + .tabs { + width: auto; + flex-direction: row; + } +} +.tabs__item { + min-height: 2.8em; + display: flex; + align-items: center; + padding: 0 1em; + color: var(--text); + transition: background-color 0.1s; + border-bottom: 3px solid transparent; + background-color: transparent; + width: 100%; +} +@media only screen and (min-width: 768px) { + .tabs__item { + width: auto; + display: inline-flex; + } +} +.tabs__item:hover { + cursor: pointer; + background-color: var(--active); + color: var(--text-contrast); + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +.tabs__item--selected { + color: var(--text); + border-color: var(--border); +} +.tabs--contrast { + border: 0; +} +.tabs--contrast .tabs__item { + color: var(--text-contrast); +} +.tabs--contrast .tabs__item:hover { + background-color: var(--background-contrast); + color: var(--text); + border-radius: 0; +} +.tabs--contrast .tabs__item--selected { + border-color: var(--border-contrast); +} +.tabs--contrast .tabs__item--selected:hover { + border-color: var(--active); +} + +/** + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.panel, .sidebar__inner { + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background-contrast); +} +.panel__body, .sidebar__body { + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .panel__body, .sidebar__body { + padding: 0.7rem 1rem 0.9rem; + } +} +.panel--border-highlight { + border-left-width: 12px; +} + +/** + *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.progress { + height: 40px; + width: 100%; + border: 1px solid var(--border); +} +.progress__inner { + height: 100%; + border: 1px solid var(--background-contrast); + background-color: var(--background); +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.figure { + margin: 0; + display: inline-block; + line-height: 0; + border: 1px solid var(--border); + border-radius: 2px; + overflow: hidden; +} +.figure__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: var(--background); + line-height: 1.618; + margin: 0; + color: var(--text-contrast); + border-top: 1px solid var(--border-contrast); +} +.figure .media { + border: 0; + border-radius: 0; +} + +.media { + border-radius: 2px; + border: 1px solid var(--border); + width: 100%; + height: auto; +} + +/** + * + * table + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.table { + width: 100%; + border: 1px solid var(--border); + background: var(--white); +} +.table__td { + color: var(--text); +} +.table__td, .table__th { + text-align: left; + border-bottom: 1px solid var(--border); + padding: 0.25em 0.75em; +} +@media only screen and (min-width: 992px) { + .table__td, .table__th { + padding: 0.5em 1.25em; + } +} +.table__th { + color: white; + background-color: var(--background); +} +.table--striped .table__tr:nth-child(even) .table__td { + background-color: #e4e4e4; +} +.table--hover .table__tr:hover .table__td { + color: white; + background-color: #585858; +} + +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.bar { + display: flex; + min-height: 2.8em; + background-color: var(--background); + color: var(--text-contrast); + border: 1px solid var(--border); + border-radius: 2px; +} +.bar__start { + justify-content: start; +} +.bar__main { + flex-grow: 1; +} +.bar__end { + justify-content: end; +} +.bar__start, .bar__main, .bar__end { + display: flex; + align-self: center; + align-items: center; + margin-left: 0.75em; +} +.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { + margin-right: 0.75em; +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.modal { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + visibility: hidden; + transition: visibility 0s linear 0.5s; + padding: 1rem; + z-index: 20; + align-items: center; + justify-content: center; +} +.modal:before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + transition: background-color 0.5s; + z-index: 19; + content: ""; + transition: background-color 0.5s; +} +.modal__inner { + position: relative; + z-index: 21; + transition: transform 0.5s; + transform: scale(0); + max-width: 600px; + width: 100%; +} +.modal__title { + font-size: 2rem; + text-align: center; + white-space: pre-line; + margin-bottom: 2rem; +} +.modal__title .icon { + font-size: 3rem; +} +.modal__title, .modal__body { + color: var(--text-contrast); +} +.modal__body { + margin-bottom: 1.5rem; +} +.modal .button { + color: var(--text-contrast); +} +.modal--open { + display: flex; + visibility: visible; + transition: visibility 0s linear 0s; +} +.modal--open:before { + background-color: var(--background-alpha); +} +.modal--open .modal__inner { + transform: scale(1); +} + +/** + *
+ * + * + * + *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.loading { + height: 60px; + width: 47px; + margin: 0 auto; + display: flex; + align-items: center; +} +.loading span { + display: block; + width: 15px; + height: 80px; + background-color: var(--background); + animation-name: loading-animation; + animation-duration: 0.5s; + animation-iteration-count: infinite; + animation-delay: 0.15s; + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); +} +.loading span:first-child { + margin-right: 1px; + animation-delay: 0s; +} +.loading span:last-child { + margin-left: 1px; + animation-delay: 0.3s; +} + +@keyframes loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.sidebar { + position: fixed; + z-index: 9; + top: 0; + left: 0; + width: 100%; + height: 100%; + max-width: 95%; + visibility: hidden; + transition: visibility 0s linear 0.5s; +} +.sidebar:before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + transition: background-color 0.5s; + z-index: 9; + content: ""; + transition: background-color 0.5s; +} +.sidebar__inner { + position: relative; + height: 100%; + z-index: 10; + transition: transform 0.2s; + transform: translateX(-100%); +} +.sidebar__footer { + position: fixed; + left: 0; + bottom: 0; + display: flex; + justify-content: space-between; + background: var(--background); + width: 100%; + padding: 1rem; +} +.sidebar--open { + visibility: visible; + transition: visibility 0s linear 0s; +} +.sidebar--open .sidebar__inner { + transform: translateX(0); +} +.sidebar--open:before { + background: var(--background-alpha); +} +@media only screen and (min-width: 992px) { + .sidebar { + max-width: 33%; + } +} + +/** + *
+ *
+ *
+ * + *
+ *
+ * + *
+ *
+ * + *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.toast { + display: flex; + background: var(--background); + border: 1px solid var(--border); + max-width: 800px; + width: max-content; + margin-top: 1.25rem; + position: relative; + left: calc(-100% - 2rem); + transition: left 0.1s; + pointer-events: auto; +} +.toast--animation { + left: 0; +} +.toast__body { + width: 100%; + padding: 1em 1.25em; +} +.toast__button { + border: 0; + appearance: none; + background: var(--background); +} +.toast__button:hover { + cursor: pointer; +} +.toast__body, .toast__button { + color: var(--text-contrast); +} +.toast__icon, .toast__button { + display: flex; + align-self: stretch; + align-items: center; + padding: 0 1em; +} +.toast__icon svg, .toast__button svg { + font-size: 2rem; +} +.toast--danger { + background: var(--danger); +} +.toast--danger .toast__button { + background: var(--danger); +} +.toast-wrapper { + position: fixed; + left: 0; + bottom: 0; + margin: 2rem; + z-index: 30; + pointer-events: none; +} + +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.masonry { + display: flex; + width: 100%; + flex-flow: row wrap; + gap: 15px; +} +.masonry__item { + width: 100%; + height: 200px; +} +@media only screen and (min-width: 768px) { + .masonry__item { + height: 300px; + } + .masonry__item:nth-child(4n+1) { + width: calc(25% - 10px); + } + .masonry__item:nth-child(4n+2) { + width: calc(55% - 10px); + } + .masonry__item:nth-child(4n+3) { + width: calc(20% - 10px); + } + .masonry__item:nth-child(4n+4) { + width: calc(67% - 10px); + } + .masonry__item:nth-child(4n+5) { + width: calc(33% - 10px); + } +} + +/** + * slider + * + *
+ *
+ *
+ *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.slider { + position: relative; + overflow-x: visible; +} +.slider__inner { + display: flex; + white-space: nowrap; +} +.slider__item { + padding: 0 0.6em; + display: inline-block; + white-space: normal; + flex-shrink: 0; +} + +/** + * grid + * + * This Grid is mainly the Reflex Grid from Lee Gordon https://reflexgrid.com/, he has + * done a great work, for i few changes it was needed to integrated + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * grid: mixin + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * order class generation mixins + * + */ +/** + * offset class generation mixins + * + */ +/** + * modifier mixins + * + */ +/** + * justify-content + * + * Uses "text-align" for the fallback inline-block grid + * "text-align" is globally supported and works on all rows except the last + * "text-align-last", where supported, handles the last line (and, happily, grids with only one row) + * + */ +/** + * Responsible Visibility + * + */ +/** + * Breakpoint viewport sizes and media queries + * + * Breakpoints are defined as a map of (name: minimum width), order from small to large: + * (xs: 576px, sm: 768px, md: 992px) + * The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default. + * Name of the next breakpoint, or null for the last breakpoint. + * >> breakpoint-next(sm) -> md + * >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md + * >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md + * + */ +/** + * Minimum breakpoint width. Null for the smallest (first) breakpoint. + * breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px + * + */ +/** + * Media of at most the maximum breakpoint width. No query for the largest breakpoint. + * Makes the @content apply to the given breakpoint and narrower. + * + */ +/** + * Media between the breakpoint's minimum and maximum widths. + * No minimum for the smallest breakpoint, and no maximum for the largest one. + * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. + * + */ +/** + * grid: helpers + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} + +.wrap-reverse { + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; +} + +/** + * flex-direction + * + */ + +/** + * align items (cross axis) + * + */ + +/** + * align content (cross axis) + * + */ + +/** + * align-self + * + */ + +/** + * justify-content (main axis) + * + */ + +.justify-end { + -webkit-justify-content: flex-end; + justify-content: flex-end; +} + +.justify-center { + -webkit-justify-content: center; + justify-content: center; +} + +/** + * cosmetic grid modifiers + * + */ + +/** + * col modifiers + * + */ + +/** + * col-grid contents + * + */ + +/** + * Responsive visibility modifiers + * + */ + +.container { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} +.container .grid { + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 992px) { + .container { + max-width: 992px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } +} +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } +} + +.grid { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + list-style-type: none; +} +.grid::after, .grid::before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + + .col-12 { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; +} + .col-12::after, .col-12::before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + .col-12 .grid { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + margin: -15px; +} + +/** + * grid generation + * + * + */ +.col-12 { + width: 100%; +} +/** + * col-auto + * + * + */ +/** + * order helpers generation + * + * + */ +/** + * offset helpers generation + * + * + */ +/** + * core + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.border { + border: 1px solid var(--border); +} + +.round { + border-radius: 50%; +} + +/** + * z-index + * + * + */ + +/** + * floating + * + * + */ + +.float-right { + float: right; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +/** + * position + * + * + */ +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.relative { + position: relative !important; +} + +/** + * + * + */ + +/** + * + * + */ +.overflow-x-hidden { + overflow-x: hidden; +} + +.object-fit-cover { + object-fit: cover; +} + +/** + * Sizing + * + * Width and Height Classes, + * Sizes with percentage will calculate with the Reflex Grid + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * mixin: sizing + * + */ +/** + * mixin: sizing for each breakpoint + * + * + */ +.w-1 { + width: 1px; +} +.h-1 { + height: 1px; +} +.h-100 { + height: 100%; +} +.w-col-12 { + width: 100%; +} +.w-1 { + width: 0.5rem; +} +.h-1 { + height: 0.5rem; +} +.h-2 { + height: 1rem; +} +.h-3 { + height: 1.5rem; +} +.h-6 { + height: 3rem; +} +.h-11 { + height: 5.5rem; +} +.h-70 { + height: 35rem; +} +/** + * Spacing + * + * creates margin and padding for each direction and for each breakpont + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * mixin: spacing for single padding or margin + * + * + */ +/** + * mixin: spacing for each breakpoint + * + * + */ +/** + * + * + * + */ +.marginless { + margin: 0; +} + +.m-last-child-0 > *:last-child { + margin: 0; +} + +.m-bottom-last-child-0 > *:last-child { + margin-bottom: 0; +} + +.m-1 { + margin: 1px; +} +.m-top-3 { + margin-top: 0.5rem; +} +.m-top-4 { + margin-top: 1.125rem; +} +.m-top-5 { + margin-top: 2rem; +} +.m-bottom-0 { + margin-bottom: 0; +} +.m-bottom-3 { + margin-bottom: 0.5rem; +} +.m-bottom-4 { + margin-bottom: 1.125rem; +} +.m-bottom-5 { + margin-bottom: 2rem; +} +.m-left-3 { + margin-left: 0.5rem; +} +@media only screen and (min-width: 768px) { + .m-left-sm-3 { + margin-left: 0.5rem; + } +} +.p-0 { + padding: 0; +} + +.p-1 { + padding: 1px; +} + +.p-0 { + padding: 0.125rem; +} +.p-1 { + padding: 0rem; +} +.p-2 { + padding: 0.125rem; +} +.p-3 { + padding: 0.5rem; +} +.p-8 { + padding: 6.125rem; +} +/** + * colors + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ + +.color-text-contrast { + color: var(--text-contrast); +} + +.fill-text { + fill: var(--text); +} +.fill-text svg { + fill: var(--text); +} + +.fill-text-contrast { + fill: var(--text-contrast); +} +.fill-text-contrast svg { + fill: var(--text-contrast); +} + +.fill-danger { + fill: var(--danger); +} +.fill-danger svg { + fill: var(--danger); +} + +.fill-success { + fill: var(--success); +} +.fill-success svg { + fill: var(--success); +} + +.fill-text-hover:hover { + fill: var(--text); +} +.fill-text-hover:hover svg { + fill: var(--text); +} + +.border-color-danger { + border-color: var(--danger); +} + +.border-color-info { + border-color: var(--info); +} + +.background-color-primary { + background-color: var(--primary); +} + +/** + * typography + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.left { + text-align: left; +} +.right { + text-align: right; +} +.center { + text-align: center; +} +.justify { + text-align: justify; +} +.uppercase { + text-transform: uppercase; +} +.lowercase { + text-transform: lowercase; +} +.crossed { + text-decoration: line-through; +} +.underline { + text-decoration: underline; +} +.capitalize { + text-transform: capitalize; +} +.italic { + font-style: italic; +} +.light { + font-weight: lighter; +} +.normal { + font-weight: normal; +} +.medium { + font-weight: medium; +} +.bold { + font-weight: bolder; +} +/** + * font-sizes + * + * + */ +.size-big { + font-size: 2.7rem; +} +/** + * white-space + * + * + */ +/** + * visibility + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * display + * + * + */ +.display-flex { + display: flex; +} +/** + * for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers + * + * @TODO full integration of reflexgrid will change this part + * + */ +/** + * Visibility + * + */ + +/** + * Opacity + * + * + */ + +/** + * + * + * + */ +.sidebar__body .loading-wrapper { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.sidebar__body .loading-wrapper .loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.sidebar__form { + height: 100%; + overflow-y: scroll; + padding-bottom: calc(72px + 1.5em); +} +.sidebar__form textarea { + resize: vertical; +} +.sidebar__footer { + justify-content: right; + bottom: -1px; + padding: 0.6rem 0.4rem; +} +.sidebar .bar { + border-radius: 0; +} +@media only screen and (min-width: 768px) { + .sidebar { + max-width: 600px; + } +} + +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/example/example.css b/example/example.css deleted file mode 100644 index bef798e..0000000 --- a/example/example.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(IBMPlexMono.eot);src:url(IBMPlexMono.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono.woff2) format("woff2"),url(IBMPlexMono.woff) format("woff"),url(IBMPlexMono.ttf) format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:700;src:url(IBMPlexMono-Bold.eot);src:url(IBMPlexMono-Bold.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono-Bold.woff2) format("woff2"),url(IBMPlexMono-Bold.woff) format("woff"),url(IBMPlexMono-Bold.ttf) format("truetype")}:root{--grid-columns:12;--grid-grid-spacing:15px;--grid-xs:576px;--grid-sm:768px;--grid-md:992px;--grid-lg:1200px;--grid-xlg:1600px;--grid-xxs-max:575px;--grid-xs-max:767px;--grid-sm-max:991px;--grid-md-max:1199px;--grid-lg-max:1599px;--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#3bc0ff;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--background-alpha:rgba(0,0,0,.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{-webkit-text-size-adjust:100%;font-size:100%;line-height:1.15}body,html{height:100%;margin:0}html{box-sizing:border-box}body{background-color:var(--body);color:var(--text);direction:ltr;font-family:var(--font-family);font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);text-decoration:none;transition:color .5s}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}button,textarea{margin:0}button{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}.h1,.h4,h1,h4{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem}.h1,h1{font-size:2.5rem}.h4,h4{font-size:1.5rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.75rem}.h4,h4{font-size:1.75rem}}.button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px;color:var(--text);display:inline-flex;font-family:var(--font-family);font-size:1rem;margin:0 0 1rem;padding:.5rem 1.3rem;position:relative;text-decoration:none;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem;padding:.3rem 1.1rem}.button:hover{background-color:var(--active);color:#fff;cursor:pointer;text-decoration:none}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{background-color:var(--background-contrast);border:1px solid var(--border);color:var(--border);cursor:not-allowed}.field-group{margin:0 0 1rem}.field-label{font-family:var(--font-family);font-size:1rem}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}.field-text{border:1px solid #a4a4a4;border-radius:2px;font-family:var(--font-family);font-size:.95rem;margin:.7rem 0 0;width:100%}.field-text:active,.field-text:focus{border-color:var(--border);outline:0}.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}.icon{fill:var(--text);font-size:1.4rem;height:1em;max-height:100%;max-width:100%;overflow:hidden;vertical-align:middle;width:1em}.sidebar__inner{background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px}.sidebar__body{padding:.6rem .8rem}@media only screen and (min-width:992px){.sidebar__body{padding:.7rem 1rem .9rem}}.bar{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:flex;min-height:2.8em}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{align-items:center;align-self:center;display:flex;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.loading{align-items:center;display:flex;height:60px;margin:0 auto;width:47px}@-webkit-keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.sidebar{max-width:95%;transition:visibility 0s linear .5s;visibility:hidden}.sidebar,.sidebar:before{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{height:100%;position:relative;transform:translateX(-100%);transition:transform .2s;z-index:10}.sidebar__footer{background:var(--background);bottom:0;display:flex;justify-content:space-between;left:0;padding:1rem;position:fixed;width:100%}.sidebar--open{transition:visibility 0s linear 0s;visibility:visible}.sidebar--open .sidebar__inner{transform:translateX(0)}.sidebar--open:before{background:var(--background-alpha)}@media only screen and (min-width:992px){.sidebar{max-width:33%}}.justify-end{justify-content:flex-end}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;width:100%}.container .grid{margin-left:-15px;margin-right:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{display:block;display:flex;flex-wrap:wrap;list-style-type:none;margin:0 auto;padding:0;position:relative}.col-12,.grid,.grid:after,.grid:before{box-sizing:border-box}.col-12{padding:15px;position:relative;vertical-align:top}.col-12:after,.col-12:before{box-sizing:border-box}.col-12 .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%}.m-top-3{margin-top:.5rem}.m-top-4{margin-top:1.125rem}.m-top-5{margin-top:2rem}.m-bottom-0{margin-bottom:0}.m-bottom-3{margin-bottom:.5rem}.m-bottom-4{margin-bottom:1.125rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}.p-left-3{padding-left:.5rem}.fill-text,.fill-text svg{fill:var(--text)}.fill-danger,.fill-danger svg{fill:var(--danger)}.fill-success,.fill-success svg{fill:var(--success)}.sidebar__form{height:100%;overflow-y:scroll;padding-bottom:calc(72px + 1.5em)}.sidebar__footer{bottom:-1px}.sidebar .bar{border-radius:0} diff --git a/example/example.js b/example/example.js deleted file mode 100644 index 12deb7d..0000000 --- a/example/example.js +++ /dev/null @@ -1,46 +0,0 @@ -(()=>{var e,t={432:e=>{!function(t,n){const r="*",o=Object.defineProperties,s=Object.entries,i=(e,t)=>(n,r)=>(e.has(n)?e.get(n).add(r):e.set(n,(new Set).add(r)),t),a=(e,t)=>(n,o)=>(n!==r||o?((e,t,n,r)=>{if(r){const t=e.get(n);t&&(t.delete(r),0===t.size&&e.delete(n))}else e.delete(n)})(e,0,n,o):e.clear(),t),u=(e,t)=>(e,n)=>t.on(e,(function r(...o){t.off(e,r),n.apply(t,o)})),c=(e,t)=>(n,...o)=>{const s=e.get(n);return s&&s.forEach((e=>e.apply(t,o))),e.get(r)&&n!==r&&t.trigger(r,n,...o),t};e.exports=function(e){const t=new Map;return o(e=e||{},s({on:i,off:a,one:u,trigger:c}).reduce(((n,[r,o])=>(n[r]={value:o(t,e),enumerable:!1,writable:!1,configurable:!1},n)),{})),e}}("undefined"!=typeof window&&window)},766:(e,t,n)=>{"use strict";n(155);function r(e,t){return typeof e===t}function o(e){return r(e,"function")}function s(e){return!function(e){return null==e}(e)&&e.constructor===Object}const i=new Map,a=Symbol("riot-component"),u=new Set,c="mount",l="update",p="unmount",d="shouldUpdate",h="onBeforeMount",m="onMounted",f="onBeforeUpdate",b="onUpdated",v="onBeforeUnmount",g="onUnmounted",y="props",x="state",T="slots",w="root",O=Symbol("pure"),E=Symbol("is_updating"),N=Symbol("parent"),A=Symbol("attributes"),j=Symbol("template");function M(e){return e.replace(/-(\w)/g,((e,t)=>t.toUpperCase()))}function C(){return this}function S(e){return o(e)?e.prototype&&e.prototype.constructor?new e:e():e}function k(e){throw new Error(e)}function _(e){return e.reduce(((e,t)=>{const{value:n,type:r}=t;switch(!0){case!t.name&&0===r:return{...e,...n};case 3===r:e.value=t.value;break;default:e[M(t.name)]=t.value}return e}),{})}function L(e,t,n,r={}){return Object.defineProperty(e,t,{value:n,enumerable:!1,writable:!1,configurable:!0,...r}),e}function U(e,t,n){return Object.entries(t).forEach((([t,r])=>{L(e,t,r,n)})),e}function I(e,t){return Object.entries(t).forEach((([t,n])=>{e[t]||(e[t]=n)})),e} -/* Riot WIP, @license MIT */ -const B=Object.freeze({[c]:C,[l]:C,[p]:C}),D=Object.assign({},B,{clone:C,createDOM:C});function P(e){for(;e.firstChild;)e.removeChild(e.firstChild)}const $=e=>e&&e.parentNode&&e.parentNode.removeChild(e),R=(e,t)=>t&&t.parentNode&&t.parentNode.insertBefore(e,t),z=(new Map,Symbol("riot-component"),new Set,Symbol("pure")),F=(Symbol("is_updating"),Symbol("parent")),V=(Symbol("attributes"),Symbol("template"),{EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4}),G={ATTRIBUTE:0,EVENT:1,TEXT:2,VALUE:3};function H(e,t,n,r={}){return Object.defineProperty(e,t,{value:n,enumerable:!1,writable:!1,configurable:!0,...r}),e}n(155);function K(e,t){return typeof e===t}function q(e){const t=e.ownerSVGElement;return!!t||null===t}function X(e){return"template"===e.tagName.toLowerCase()}function W(e){return null==e}const Y=Symbol(),Z=Symbol();function J(e){const t=e.dom.cloneNode(!0),{head:n,tail:r}=function(){const e=document.createTextNode(""),t=document.createTextNode("");return e[Y]=!0,t[Z]=!0,{head:e,tail:t}}();return{avoidDOMInjection:!0,fragment:t,head:n,tail:r,children:[n,...Array.from(t.childNodes),r]}}const Q=Symbol("unmount"),ee={nodes:[],mount(e,t){return this.update(e,t)},update(e,t){const{placeholder:n,nodes:r,childrenMap:o}=this,s=e===Q?null:this.evaluate(e),i=s?Array.from(s):[],{newChildrenMap:a,batches:u,futureNodes:c}=function(e,t,n,r){const{condition:o,template:s,childrenMap:i,itemName:a,getKey:u,indexName:c,root:l,isTemplateTag:p}=r,d=new Map,h=[],m=[];return e.forEach(((e,r)=>{const f=function(e,{itemName:t,indexName:n,index:r,item:o}){H(e,t,o),n&&H(e,n,r);return e}(Object.create(t),{itemName:a,indexName:c,index:r,item:e}),b=u?u(f):r,v=i.get(b),g=[];if(function(e,t){return!!e&&!e(t)}(o,f))return;const y=!v,x=v?v.template:s.clone(),T=x.el||l.cloneNode(),w=p&&y?J(x):x.meta;y?h.push((()=>x.mount(T,f,n,w))):h.push((()=>x.update(f,n))),p?g.push(...w.children):g.push(T),i.delete(b),m.push(...g),d.set(b,{nodes:g,template:x,context:f,index:r})})),{newChildrenMap:d,batches:h,futureNodes:m}}(i,e,t,this);return((e,t,n,r)=>{const o=t.length;let s=e.length,i=o,a=0,u=0,c=null;for(;ar-u){const o=n(e[a],0);for(;u{if(r<0){const n=e[e.length-1];if(n){const{template:r,nodes:o,context:s}=n;o.pop(),o.length||(e.pop(),r.unmount(s,t,null))}}return n}}(Array.from(o.values()),t),n),u.forEach((e=>e())),this.childrenMap=a,this.nodes=c,this},unmount(e,t){return this.update(Q,t),this}};const te={mount(e,t){return this.update(e,t)},update(e,t){const n=!!this.evaluate(e),r=!this.value&&n,o=this.value&&!n,s=()=>{const n=this.node.cloneNode();R(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,e,t)};switch(!0){case r:s();break;case o:this.unmount(e);break;default:n&&this.template.update(e,t)}return this.value=n,this},unmount(e,t){return this.template.unmount(e,t,!0),this}};const ne="undefined"==typeof Element?{}:Element.prototype,re=function(e){const t=new Map,n=n=>(t.has(n)||t.set(n,e.call(this,n)))&&t.get(n);return n.cache=t,n}((e=>ne.hasOwnProperty(e)));function oe(e,{name:t},n,r){if(!t)return r&&function(e,t,n){const r=t?Object.keys(t):[];Object.keys(n).filter((e=>!r.includes(e))).forEach((t=>e.removeAttribute(t)))}(e,n,r),void(n&&function(e,t){Object.entries(t).forEach((([t,n])=>oe(e,{name:t},n)))}(e,n));!re(t)&&(function(e){return K(e,"boolean")}(n)||function(e){return!W(e)&&e.constructor===Object}(n)||function(e){return K(e,"function")}(n))&&(e[t]=n),!function(e){return!e&&0!==e}(n)?function(e){return!0===e||["string","number"].includes(typeof e)}(n)&&e.setAttribute(t,function(e,t){return!0===t?e:t}(t,n)):e.removeAttribute(t)}const se=/^on/,ie={handleEvent(e){this[e.type](e)}},ae=new WeakMap;function ue(e){return W(e)?"":e}const ce=(e,t)=>{const n=e.childNodes[t];if(n.nodeType===Node.COMMENT_NODE){const t=document.createTextNode("");return e.replaceChild(t,n),t}return n};const le={0:oe,1:function(e,{name:t},n){const r=t.replace(se,""),o=ae.get(e)||(e=>{const t=Object.create(ie);return ae.set(e,t),t})(e),[s,i]=(e=>Array.isArray(e)?e:[e,!1])(n),a=o[r],u=s&&!a;a&&!s&&e.removeEventListener(r,o),u&&e.addEventListener(r,o,i),o[r]=s},2:function(e,t,n){e.data=ue(n)},3:function(e,t,n){e.value=ue(n)}},pe={mount(e){return this.value=this.evaluate(e),de(this,this.value),this},update(e){const t=this.evaluate(e);return this.value!==t&&(de(this,t),this.value=t),this},unmount(){return 1===this.type&&de(this,null),this}};function de(e,t){return le[e.type](e.node,e,t,e.value)}function he(e,t){return{...pe,...t,node:2===t.type?ce(e,t.childNodeIndex):e}}const me=(e,t)=>e[F]||t,fe={attributes:[],getTemplateScope(e,t){return function(e,t,n){if(!e||!e.length)return n;const r=e.map((e=>({...e,value:e.evaluate(t)})));return Object.assign(Object.create(n||null),function(e){return e.reduce(((e,t)=>{const{value:n,type:r}=t;switch(!0){case!t.name&&0===r:return{...e,...n};case 3===r:e.value=t.value;break;default:e[(o=t.name,o.replace(/-(\w)/g,((e,t)=>t.toUpperCase())))]=t.value}var o;return e}),{})}(r))}(this.attributes,e,t)},mount(e,t){const n=!!e.slots&&e.slots.find((({id:e})=>e===this.name)),{parentNode:r}=this.node,o=me(e,t);return this.template=n&&Oe(n.html,n.bindings).createDOM(r),this.template&&(P(this.node),this.template.mount(this.node,this.getTemplateScope(e,o),o),this.template.children=Array.from(this.node.childNodes)),be(this.node),$(this.node),this},update(e,t){if(this.template){const n=me(e,t);this.template.update(this.getTemplateScope(e,n),n)}return this},unmount(e,t,n){return this.template&&this.template.unmount(this.getTemplateScope(e,t),null,n),this}};function be(e){const t=e&&e.firstChild;t&&(R(t,e),be(e))}function ve(e){return e.reduce(((e,{bindings:t})=>e.concat(t)),[])}const ge={mount(e){return this.update(e)},update(e,t){const n=this.evaluate(e);return n&&n===this.name?this.tag.update(e):(this.unmount(e,t,!0),this.name=n,this.tag=function(e,t=[],n=[]){return e?e({slots:t,attributes:n}):Oe(function(e){return e.reduce(((e,t)=>e+t.html),"")}(t),[...ve(t),{expressions:n.map((e=>({type:0,...e})))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,e)),this},unmount(e,t,n){return this.tag&&this.tag.unmount(n),this}};const ye={1:function(e,{evaluate:t,template:n}){const r=document.createTextNode("");return R(r,e),$(e),{...te,node:e,evaluate:t,placeholder:r,template:n.createDOM(e)}},2:function(e,{expressions:t}){return{...(n=t.map((t=>he(e,t))),r=["mount","update","unmount"],r.reduce(((e,t)=>({...e,[t]:e=>n.map((n=>n[t](e)))&&o})),{}))};var n,r,o},0:function(e,{evaluate:t,condition:n,itemName:r,indexName:o,getKey:s,template:i}){const a=document.createTextNode(""),u=e.cloneNode();return R(a,e),$(e),{...ee,childrenMap:new Map,node:e,root:u,condition:n,evaluate:t,isTemplateTag:X(u),template:i.createDOM(e),getKey:s,indexName:o,itemName:r,placeholder:a}},3:function(e,{evaluate:t,getComponent:n,slots:r,attributes:o}){return{...ge,node:e,evaluate:t,slots:r,attributes:o,getComponent:n}},4:function(e,{name:t,attributes:n}){return{...fe,attributes:n,node:e,name:t}}};function xe(e,t){return e.map((e=>2===e.type?{...e,childNodeIndex:e.childNodeIndex+t}:e))}function Te(e,t){return q(e)?function(e,t){return t.ownerDocument.importNode((new window.DOMParser).parseFromString(`${e}`,"application/xml").documentElement,!0)}(t,e):function(e,t){const n=X(t)?t:document.createElement("template");return n.innerHTML=e,n.content}(t,e)}const we={createDOM(e){return this.dom=this.dom||function(e,t){return t&&("string"==typeof t?Te(e,t):t)}(e,this.html)||document.createDocumentFragment(),this},mount(e,t,n,r={}){e||function(e){throw new Error(e)}("Please provide DOM node to mount properly your template"),this.el&&this.unmount(t);const{fragment:o,children:s,avoidDOMInjection:i}=r,{parentNode:a}=s?s[0]:e,u=X(e),c=u?function(e,t,n){const r=Array.from(e.childNodes);return Math.max(r.indexOf(t),r.indexOf(n.head)+1,0)}(a,e,r):null;this.createDOM(e);const l=o||this.dom.cloneNode(!0);return this.el=u?a:e,this.children=u?s||Array.from(l.childNodes):null,!i&&l&&function(e,t){switch(!0){case q(e):n=t,e.replaceChildren(...n.childNodes);break;case X(e):e.parentNode.replaceChild(t,e);break;default:e.appendChild(t)}var n}(e,l),this.bindings=this.bindingsData.map((e=>function(e,t,n){const{selector:r,type:o,redundantAttribute:s,expressions:i}=t,a=r?e.querySelector(r):e;s&&a.removeAttribute(s);const u=i||[];return(ye[o]||ye[2])(a,{...t,expressions:n&&!r?xe(u,n):u})}(this.el,e,c))),this.bindings.forEach((e=>e.mount(t,n))),this.meta=r,this},update(e,t){return this.bindings.forEach((n=>n.update(e,t))),this},unmount(e,t,n=!1){const r=this.el;if(!r)return this;switch(this.bindings.forEach((r=>r.unmount(e,t,n))),!0){case r[z]||null===n:break;case Array.isArray(this.children):!function(e){for(let t=0;t{let[n,r]=t;var o;return e[(o=n,o.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=He(r),e}),{})}(t.exports?t.exports.components:{});return e(Oe,G,V,(e=>e===t.name?Ke(t):n[e]||i.get(e)))} -/* Riot WIP, @license MIT */ -const Ne=(e,t)=>e[a]=t; -/* Riot WIP, @license MIT */ -function Ae(e){return[c,l,p].reduce(((t,n)=>(t[n]=e(n),t)),{})}function je(e){return Array.isArray(e)?e:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(e))&&"number"==typeof e.length?Array.from(e):[e]}function Me(e,t){return je("string"==typeof e?(t||document).querySelectorAll(e):e)} -/* Riot WIP, @license MIT */ -const Ce=Object.freeze({$(e){return Me(e,this.root)[0]},$$(e){return Me(e,this.root)}}),Se=Object.freeze({[d]:C,[h]:C,[m]:C,[f]:C,[b]:C,[v]:C,[g]:C}),ke=e=>1===e.length?e[0]:e;function _e(e,t,n){const r="string"==typeof t?[t]:t;return ke(je(e).map((e=>ke(r.map((t=>e[n](t)))))))}function Le(e,t,n){const r="object"==typeof t?t:{[t]:n},o=Object.keys(r);return je(e).forEach((e=>{o.forEach((t=>e.setAttribute(t,r[t])))})),e}function Ue(e,t){return _e(e,t,"getAttribute")}const Ie=new Map,Be=()=>De||(Le(De=Me("style[riot]")[0]||document.createElement("style"),"type","text/css"),De.parentNode||document.head.appendChild(De),De);var De;const Pe={CSS_BY_NAME:Ie,add(e,t){return Ie.has(e)||(Ie.set(e,t),this.inject()),this},inject(){return Be().innerHTML=[...Ie.values()].join("\n"),this},remove(e){return Ie.has(e)&&(Ie.delete(e),this.inject()),this}};function $e(e,...t){return(...n)=>(n=[...t,...n]).length(e[M(t.name)]=t.value,e)),{})}(e),S(t))} -/* Riot WIP, @license MIT */ -function Ve(e,t){let{slots:n,attributes:r,props:i}=t;return a= -/* Riot WIP, @license MIT */ -function(e){return[...u].reduce(((e,t)=>t(e)||e),e)}(U(s(e)?Object.create(e):e,{mount(t,o,s){return void 0===o&&(o={}),L(t,O,!1),this[N]=s,this[A]= -/* Riot WIP, @license MIT */ -function(e,t){void 0===t&&(t=[]);const n=t.map((t=>he(e,t))),r={};return Object.assign(r,Object.assign({expressions:n},Ae((e=>t=>(n.forEach((n=>n[e](t))),r)))))}(t,r).mount(s),L(this,y,Object.freeze(Object.assign({},Fe(t,i),_(this[A].expressions)))),this.state=ze(this.state,o),this[j]=this.template.createDOM(t).clone(),Ne(t,this),e.name&& -/* Riot WIP, @license MIT */ -function(e,t){Re(e)!==t&&Le(e,"is",t)}(t,e.name),L(this,w,t),L(this,T,n),this.onBeforeMount(this.props,this.state),this[j].mount(t,this,s),this.onMounted(this.props,this.state),this},update(e,t){void 0===e&&(e={}),t&&(this[N]=t,this[A].update(t));const n=_(this[A].expressions);if(!1!==this.shouldUpdate(n,this.props))return L(this,y,Object.freeze(Object.assign({},this.props,n))),this.state=ze(this.state,e),this.onBeforeUpdate(this.props,this.state),this[E]||(this[E]=!0,this[j].update(this,this[N])),this.onUpdated(this.props,this.state),this[E]=!1,this},unmount(e){return this.onBeforeUnmount(this.props,this.state),this[A].unmount(),this[j].unmount(this,this[N],null===e?null:!e),this.onUnmounted(this.props,this.state),this}})),Object.keys(e).filter((t=>o(e[t]))).forEach((e=>{a[e]=a[e].bind(a)})),a;var a} -/* Riot WIP, @license MIT */ -function Ge(e){let{css:t,template:n,componentAPI:r,name:o}=e;return t&&o&&Pe.add(o,t),$e(Ve)(U(I(r,Object.assign({},Se,{[y]:{},[x]:{}})),Object.assign({[T]:null,[w]:null},Ce,{name:o,css:t,template:n})))} -/* Riot WIP, @license MIT */ -function He(e){const{css:t,template:n,exports:r,name:o}=e,s=n?Ee(n,e):D;return e=>{let{slots:i,attributes:a,props:u}=e;if(r&&r[O]) -/* Riot WIP, @license MIT */return function(e,t){let{slots:n,attributes:r,props:o,css:s,template:i}=t;i&&k("Pure components can not have html"),s&&k("Pure components do not have css");const a=I(e({slots:n,attributes:r,props:o}),B);return Ae((e=>function(){for(var t=arguments.length,n=new Array(t),r=0;rp.mount(e,n,t),update:(e,t)=>p.update(t,e),unmount:e=>p.unmount(e)}}}const Ke=function(e){const t=new Map,n=n=>(t.has(n)||t.set(n,e.call(this,n)))&&t.get(n);return n.cache=t,n}(He); -/* Riot WIP, @license MIT */ -function qe(e,t){let{css:n,template:r,exports:o}=t;return i.has(e)&&k(`The component "${e}" was already registered`),i.set(e,He({name:e,css:n,template:r,exports:o})),i} -/* Riot WIP, @license MIT */ -function Xe(e,t,n){return Me(e).map((e=> -/* Riot WIP, @license MIT */ -function(e,t,n,r){const o=n||Re(e);return i.has(o)||k(`The component named "${o}" was never registered`),i.get(o)({props:t,slots:r}).mount(e)}(e,t,n)))}var We=n(432); -/** - * example store for trigger open - * - * @author Björn Hase - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://gitea.node001.net/tiny-components/sidebar-form - * - */const Ye=n.n(We)()({open:function(){this.trigger("open")}}),Ze={state:{open:!1,isLoading:!1,current:{}},handleClose:function(){this.reset(),this.state.isOpen=!1,this.update()},getCssClasses:function(){var e=["sidebar"];return!0===this.state.isOpen&&e.push("sidebar--open"),e.join(" ")},onBeforeMount:function(){if(!this.hasOwnProperty("reset"))throw new Error("reset-Function in Form is missing");this.reset()}};qe("tiny-loading",{css:null,exports:null,template:(e,t,n,r)=>e('
',[{type:n.IF,evaluate:e=>e.props.active,redundantAttribute:"expr10",selector:"[expr10]",template:e('
',[])}]),name:"tiny-loading"}),qe("tiny-sidebar-form-header",{css:null,exports:null,template:(e,t,n,r)=>e('
',[{redundantAttribute:"expr6",selector:"[expr6]",expressions:[{type:t.TEXT,childNodeIndex:0,evaluate:e=>[e.props.title].join("")}]},{redundantAttribute:"expr7",selector:"[expr7]",expressions:[{type:t.EVENT,name:"onclick",evaluate:e=>e.props.close}]}]),name:"tiny-sidebar-form-header"}),qe("tiny-sidebar-form-footer",{css:null,exports:null,template:(e,t,n,r)=>e('
',[{redundantAttribute:"expr8",selector:"[expr8]",expressions:[{type:t.ATTRIBUTE,name:"disabled",evaluate:e=>e.props.active}]},{redundantAttribute:"expr9",selector:"[expr9]",expressions:[{type:t.ATTRIBUTE,name:"disabled",evaluate:e=>e.props.active}]}]),name:"tiny-sidebar-form-footer"});const Je={css:null,exports:{handleClick(){Ye.trigger("open")}},template:(e,t,n,r)=>e('',[{redundantAttribute:"expr5",selector:"[expr5]",expressions:[{type:t.EVENT,name:"onclick",evaluate:e=>t=>{e.handleClick(t)}}]}]),name:"example-button"};qe("example-sidebar-form",{css:null,exports:()=>({...Ze,onMounted(){Ye.on("open",(()=>{this.state.isOpen=!0,this.update()}))},handleSubmit(e){e.preventDefault(),this.state.isLoading=!0,this.update(),setTimeout((()=>{this.state.isLoading=!1,e.submitter.attributes.close&&this.handleClose(),this.update()}),2500)},reset(){}}),template:(e,t,n,r)=>e('
',[{redundantAttribute:"expr0",selector:"[expr0]",expressions:[{type:t.ATTRIBUTE,name:"class",evaluate:e=>e.getCssClasses()}]},{type:n.TAG,getComponent:r,evaluate:e=>"tiny-sidebar-form-header",slots:[],attributes:[{type:t.ATTRIBUTE,name:"title",evaluate:e=>e.state.current.note?"Edit":"New"},{type:t.ATTRIBUTE,name:"close",evaluate:e=>t=>{e.handleClose(t)}}],redundantAttribute:"expr1",selector:"[expr1]"},{redundantAttribute:"expr2",selector:"[expr2]",expressions:[{type:t.EVENT,name:"onsubmit",evaluate:e=>t=>{e.handleSubmit(t)}}]},{type:n.TAG,getComponent:r,evaluate:e=>"tiny-loading",slots:[],attributes:[{type:t.ATTRIBUTE,name:"active",evaluate:e=>e.state.isLoading}],redundantAttribute:"expr3",selector:"[expr3]"},{type:n.TAG,getComponent:r,evaluate:e=>"tiny-sidebar-form-footer",slots:[],attributes:[{type:t.ATTRIBUTE,name:"active",evaluate:e=>e.state.isLoading}],redundantAttribute:"expr4",selector:"[expr4]"}]),name:"example-sidebar-form"}),Xe("example-sidebar-form"),qe("example-button",Je),Xe("example-button")},37:()=>{},155:e=>{var t,n,r=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function i(e){if(t===setTimeout)return setTimeout(e,0);if((t===o||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:o}catch(e){t=o}try{n="function"==typeof clearTimeout?clearTimeout:s}catch(e){n=s}}();var a,u=[],c=!1,l=-1;function p(){c&&a&&(c=!1,a.length?u=a.concat(u):l=-1,u.length&&d())}function d(){if(!c){var e=i(p);c=!0;for(var t=u.length;t;){for(a=u,u=[];++l1)for(var n=1;n{if(!n){var i=1/0;for(l=0;l=s)&&Object.keys(r.O).every((e=>r.O[e](n[u])))?n.splice(u--,1):(a=!1,s0&&e[l-1][2]>s;l--)e[l]=e[l-1];e[l]=[n,o,s]},r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={268:0,908:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var o,s,[i,a,u]=n,c=0;if(i.some((t=>0!==e[t]))){for(o in a)r.o(a,o)&&(r.m[o]=a[o]);if(u)var l=u(r)}for(t&&t(n);cr(766)));var o=r.O(void 0,[908],(()=>r(37)));o=r.O(o)})(); \ No newline at end of file diff --git a/example/index.html b/example/index.html index b2a8b8b..a022684 100644 --- a/example/index.html +++ b/example/index.html @@ -5,9 +5,8 @@ Tiny Components | Loading - + -
@@ -17,20 +16,6 @@ @tiny-components/sidebar-form -
- - Gitea - - - - Github - - -
@@ -38,14 +23,13 @@
- - + +
- + - - \ No newline at end of file + diff --git a/example/js/example.js b/example/js/example.js new file mode 100644 index 0000000..4e4723a --- /dev/null +++ b/example/js/example.js @@ -0,0 +1 @@ +(()=>{var __webpack_modules__={"./node_modules/@riotjs/observable/dist/observable.js":module=>{eval(";(function(window, undefined) {const ALL_CALLBACKS = '*'\nconst define = Object.defineProperties\nconst entries = Object.entries\n\nconst on = (callbacks, el) => (event, fn) => {\n if (callbacks.has(event)) {\n callbacks.get(event).add(fn)\n } else {\n callbacks.set(event, new Set().add(fn))\n }\n\n return el\n}\n\nconst deleteCallback = (callbacks, el, event, fn) => {\n if (fn) {\n const fns = callbacks.get(event)\n\n if (fns) {\n fns.delete(fn)\n if (fns.size === 0) callbacks.delete(event)\n }\n } else callbacks.delete(event)\n}\n\nconst off = (callbacks, el) => (event, fn) => {\n if (event === ALL_CALLBACKS && !fn) {\n callbacks.clear()\n } else {\n deleteCallback(callbacks, el, event, fn)\n }\n\n return el\n}\n\nconst one = (callbacks, el) => (event, fn) => {\n function on(...args) {\n el.off(event, on)\n fn.apply(el, args)\n }\n return el.on(event, on)\n}\n\nconst trigger = (callbacks, el) => (event, ...args) => {\n const fns = callbacks.get(event)\n\n if (fns) fns.forEach(fn => fn.apply(el, args))\n\n if (callbacks.get(ALL_CALLBACKS) && event !== ALL_CALLBACKS) {\n el.trigger(ALL_CALLBACKS, event, ...args)\n }\n\n return el\n}\n\nconst observable = function(el) { // eslint-disable-line\n const callbacks = new Map()\n const methods = {on, off, one, trigger}\n\n el = el || {}\n\n define(el,\n entries(methods).reduce((acc, [key, method]) => {\n acc[key] = {\n value: method(callbacks, el),\n enumerable: false,\n writable: false,\n configurable: false\n }\n\n return acc\n }, {})\n )\n\n return el\n}\n /* istanbul ignore next */\n // support CommonJS, AMD & browser\n if (true)\n module.exports = observable\n else {}\n\n})(typeof window != 'undefined' ? window : undefined);\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/@riotjs/observable/dist/observable.js?")},"./node_modules/@tiny-components/loading/src/loading.riot":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n css: null,\n exports: null,\n\n template: (\n template,\n expressionTypes,\n bindingTypes,\n getComponent\n ) => template(\n '
',\n [\n {\n type: bindingTypes.IF,\n evaluate: _scope => _scope.props.active,\n redundantAttribute: 'expr9',\n selector: '[expr9]',\n\n template: template(\n '
',\n []\n )\n }\n ]\n ),\n\n name: 'tiny-loading'\n});\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/@tiny-components/loading/src/loading.riot?")},"./src/example/exampleButton.riot":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../sidebarFormStore.js */ \"./src/sidebarFormStore.js\");\n// store for sidebar\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n css: null,\n\n exports: {\n handleClick() {\n _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].open(this.props.name)\n }\n },\n\n template: (\n template,\n expressionTypes,\n bindingTypes,\n getComponent\n ) => template(\n '',\n [\n {\n redundantAttribute: 'expr5',\n selector: '[expr5]',\n\n expressions: [\n {\n type: expressionTypes.EVENT,\n name: 'onclick',\n evaluate: _scope => event => { _scope.handleClick(event) }\n }\n ]\n }\n ]\n ),\n\n name: 'example-button'\n});\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/example/exampleButton.riot?")},"./src/example/exampleSidebarForm.riot":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! riot */ \"./node_modules/riot/esm/api/register.js\");\n/* harmony import */ var _tiny_components_loading_src_loading_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tiny-components/loading/src/loading.riot */ \"./node_modules/@tiny-components/loading/src/loading.riot\");\n/* harmony import */ var _sidebarFormHeader_riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./../sidebarFormHeader.riot */ \"./src/sidebarFormHeader.riot\");\n/* harmony import */ var _sidebarFormFooter_riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./../sidebarFormFooter.riot */ \"./src/sidebarFormFooter.riot\");\n/* harmony import */ var _sidebarFormMixin_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../sidebarFormMixin.js */ \"./src/sidebarFormMixin.js\");\n\n\n// adding TinyLoading\n\nriot__WEBPACK_IMPORTED_MODULE_1__.register('tiny-loading', _tiny_components_loading_src_loading_riot__WEBPACK_IMPORTED_MODULE_0__[\"default\"])\n\n;\nriot__WEBPACK_IMPORTED_MODULE_1__.register('tiny-sidebar-form-header', _sidebarFormHeader_riot__WEBPACK_IMPORTED_MODULE_2__[\"default\"])\n\n;\nriot__WEBPACK_IMPORTED_MODULE_1__.register('tiny-sidebar-form-footer', _sidebarFormFooter_riot__WEBPACK_IMPORTED_MODULE_3__[\"default\"])\n\n// mixin to extend current component\n;\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n css: null,\n\n exports: () => {\n return {\n\n ..._sidebarFormMixin_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"], // adding basic funtion for sidebar\n\n /**\n * handle submit of form\n *\n * @param {object} event\n *\n */\n handleSubmit(event) {\n event.preventDefault()\n\n this.state.isLoading = true\n this.update()\n\n setTimeout(() => {\n\n // stop loading\n this.state.isLoading = false\n this.handleClose()\n\n this.update()\n\n }, 2500)\n },\n\n reset() {\n\n }\n }\n },\n\n template: (\n template,\n expressionTypes,\n bindingTypes,\n getComponent\n ) => template(\n '
',\n [\n {\n redundantAttribute: 'expr0',\n selector: '[expr0]',\n\n expressions: [\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: false,\n name: 'class',\n evaluate: _scope => _scope.getCssClasses()\n }\n ]\n },\n {\n type: bindingTypes.TAG,\n getComponent: getComponent,\n evaluate: _scope => 'tiny-sidebar-form-header',\n slots: [],\n\n attributes: [\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: false,\n name: 'title',\n evaluate: _scope => !_scope.state.current.note ? 'New' : 'Edit'\n },\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: false,\n name: 'close',\n evaluate: _scope => event => { _scope.handleClose(event) }\n }\n ],\n\n redundantAttribute: 'expr1',\n selector: '[expr1]'\n },\n {\n redundantAttribute: 'expr2',\n selector: '[expr2]',\n\n expressions: [\n {\n type: expressionTypes.EVENT,\n name: 'onsubmit',\n evaluate: _scope => event => { _scope.handleSubmit(event) }\n }\n ]\n },\n {\n type: bindingTypes.TAG,\n getComponent: getComponent,\n evaluate: _scope => 'tiny-loading',\n slots: [],\n\n attributes: [\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: false,\n name: 'active',\n evaluate: _scope => _scope.state.isLoading\n }\n ],\n\n redundantAttribute: 'expr3',\n selector: '[expr3]'\n },\n {\n type: bindingTypes.TAG,\n getComponent: getComponent,\n evaluate: _scope => 'tiny-sidebar-form-footer',\n slots: [],\n\n attributes: [\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: false,\n name: 'active',\n evaluate: _scope => _scope.state.isLoading\n }\n ],\n\n redundantAttribute: 'expr4',\n selector: '[expr4]'\n }\n ]\n ),\n\n name: 'example-sidebar-form'\n});\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/example/exampleSidebarForm.riot?")},"./src/sidebarFormFooter.riot":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n css: null,\n exports: null,\n\n template: (\n template,\n expressionTypes,\n bindingTypes,\n getComponent\n ) => template(\n \'
\',\n [\n {\n redundantAttribute: \'expr8\',\n selector: \'[expr8]\',\n\n expressions: [\n {\n type: expressionTypes.ATTRIBUTE,\n isBoolean: true,\n name: \'disabled\',\n evaluate: _scope => _scope.props.active\n }\n ]\n }\n ]\n ),\n\n name: \'tiny-sidebar-form-footer\'\n});\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/sidebarFormFooter.riot?')},"./src/sidebarFormHeader.riot":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n css: null,\n exports: null,\n\n template: (\n template,\n expressionTypes,\n bindingTypes,\n getComponent\n ) => template(\n \'
\',\n [\n {\n redundantAttribute: \'expr6\',\n selector: \'[expr6]\',\n\n expressions: [\n {\n type: expressionTypes.TEXT,\n childNodeIndex: 0,\n\n evaluate: _scope => [\n _scope.props.title\n ].join(\n \'\'\n )\n }\n ]\n },\n {\n redundantAttribute: \'expr7\',\n selector: \'[expr7]\',\n\n expressions: [\n {\n type: expressionTypes.EVENT,\n name: \'onclick\',\n evaluate: _scope => _scope.props.close\n }\n ]\n }\n ]\n ),\n\n name: \'tiny-sidebar-form-header\'\n});\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/sidebarFormHeader.riot?')},"./src/example/example.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/api/register.js");\n/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/api/mount.js");\n/* harmony import */ var _exampleSidebarForm_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./exampleSidebarForm.riot */ "./src/example/exampleSidebarForm.riot");\n/* harmony import */ var _exampleButton_riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./exampleButton.riot */ "./src/example/exampleButton.riot");\n\n\n\n\nriot__WEBPACK_IMPORTED_MODULE_1__.register(\'example-sidebar-form\', _exampleSidebarForm_riot__WEBPACK_IMPORTED_MODULE_0__["default"])\nriot__WEBPACK_IMPORTED_MODULE_2__.mount(\'example-sidebar-form\')\n\n;\n\nriot__WEBPACK_IMPORTED_MODULE_1__.register(\'example-button\', _exampleButton_riot__WEBPACK_IMPORTED_MODULE_3__["default"])\nriot__WEBPACK_IMPORTED_MODULE_2__.mount(\'example-button\')\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/example/example.js?')},"./src/sidebarFormMixin.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sidebarFormStore.js */ \"./src/sidebarFormStore.js\");\n// store for sidebar\n\n\n/**\n * mixin extends sidebarForm\n *\n * @author Björn Hase \n * @license http://opensource.org/licenses/MIT The MIT License\n * @link https://git.node001.net/tiny-components/sidebar-form.git\n *\n */\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\n state: {\n open: false, // if sidebar is open\n isLoading: false, // if loading is shown\n current: { // current data of form\n\n },\n name: undefined\n },\n\n /**\n * close current sidebar\n *\n */\n handleClose() {\n this.reset()\n\n this.state.isOpen = false\n this.update()\n },\n\n /**\n * getting css classes for sidebar\n *\n *\n * @return {String}\n *\n */\n getCssClasses() {\n const classes = [\n 'sidebar'\n ]\n\n if (this.state.isOpen === true) {\n classes.push('sidebar--open')\n }\n\n return classes.join(' ')\n },\n\n /**\n *\n *\n *\n */\n onBeforeMount() {\n if (!this.hasOwnProperty('reset')) {\n throw new Error('Sidebar-Form reset-Function is missing')\n }\n\n if (!this.props.name) {\n throw new Error('Sidebar-Form needs name-attribute for handle open and close-event')\n }\n\n // adding event for open sidebar\n _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].on('open.' + this.props.name, (data) => {\n if (data) {\n this.state.current = data\n }\n\n this.state.isOpen = true\n this.update()\n })\n\n // adding event for open sidebar\n _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].on('close.' + this.props.name, () => {\n this.state.isOpen = false\n this.update()\n })\n\n // adding event for open sidebar\n _sidebarFormStore_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].on('close.all', () => {\n this.state.isOpen = false\n this.update()\n })\n\n this.reset()\n }\n});\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/sidebarFormMixin.js?")},"./src/sidebarFormStore.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _riotjs_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @riotjs/observable */ \"./node_modules/@riotjs/observable/dist/observable.js\");\n/* harmony import */ var _riotjs_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_riotjs_observable__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/**\n * example store for trigger open\n *\n * @author Björn Hase\n * @license http://opensource.org/licenses/MIT The MIT License\n * @link https://gitea.node001.net/tiny-components/sidebar-form\n *\n */\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_riotjs_observable__WEBPACK_IMPORTED_MODULE_0___default()({\n\n /**\n *\n * @param {object} data\n *\n */\n open(name, data = undefined) {\n this.trigger('open.' + name, data)\n },\n\n /**\n *\n * @param {object} data\n *\n */\n close(name = 'all') {\n this.trigger('close.' + name)\n }\n}));\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./src/sidebarFormStore.js?")},"./node_modules/riot/esm/api/mount.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "mount": () => (/* binding */ mount)\n/* harmony export */ });\n/* harmony import */ var _dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/bianco.query/index.next.js */ "./node_modules/riot/esm/dependencies/bianco.query/index.next.js");\n/* harmony import */ var _core_mount_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../core/mount-component.js */ "./node_modules/riot/esm/core/mount-component.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n/**\n * Mounting function that will work only for the components that were globally registered\n * @param {string|HTMLElement} selector - query for the selection or a DOM element\n * @param {Object} initialProps - the initial component properties\n * @param {string} name - optional component name\n * @returns {Array} list of riot components\n */\nfunction mount(selector, initialProps, name) {\n return (0,_dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__["default"])(selector).map((element) =>\n (0,_core_mount_component_js__WEBPACK_IMPORTED_MODULE_1__.mountComponent)(element, initialProps, name),\n )\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/api/mount.js?')},"./node_modules/riot/esm/api/register.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "register": () => (/* binding */ register)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/misc.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/misc.js");\n/* harmony import */ var _core_create_component_from_wrapper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../core/create-component-from-wrapper.js */ "./node_modules/riot/esm/core/create-component-from-wrapper.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n/**\n * Register a custom tag by name\n * @param {string} name - component name\n * @param {Object} implementation - tag implementation\n * @returns {Map} map containing all the components implementations\n */\nfunction register(name, { css, template, exports }) {\n if (_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.COMPONENTS_IMPLEMENTATION_MAP.has(name))\n (0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_1__.panic)(`The component "${name}" was already registered`);\n\n _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.COMPONENTS_IMPLEMENTATION_MAP.set(\n name,\n (0,_core_create_component_from_wrapper_js__WEBPACK_IMPORTED_MODULE_2__.createComponentFromWrapper)({ name, css, template, exports }),\n );\n\n return _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.COMPONENTS_IMPLEMENTATION_MAP\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/api/register.js?')},"./node_modules/riot/esm/core/add-css-hook.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "addCssHook": () => (/* binding */ addCssHook)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/riot/esm/utils/dom.js");\n/* harmony import */ var _dependencies_bianco_attr_index_next_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/bianco.attr/index.next.js */ "./node_modules/riot/esm/dependencies/bianco.attr/index.next.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n/**\n * Add eventually the "is" attribute to link this DOM node to its css\n * @param {HTMLElement} element - target root node\n * @param {string} name - name of the component mounted\n * @returns {undefined} it\'s a void function\n */\n\nfunction addCssHook(element, name) {\n if ((0,_utils_dom_js__WEBPACK_IMPORTED_MODULE_0__.getName)(element) !== name) {\n (0,_dependencies_bianco_attr_index_next_js__WEBPACK_IMPORTED_MODULE_1__.set)(element, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_2__.IS_DIRECTIVE, name);\n }\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/add-css-hook.js?')},"./node_modules/riot/esm/core/bind-dom-node-to-component-instance.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "bindDOMNodeToComponentInstance": () => (/* binding */ bindDOMNodeToComponentInstance)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* Riot v9.4.3, @license MIT */\n\n\n/**\n * Bind a DOM node to its component object\n * @param {HTMLElement} node - html node mounted\n * @param {Object} component - Riot.js component object\n * @returns {Object} the component object received as second argument\n */\nconst bindDOMNodeToComponentInstance = (node, component) =>\n (node[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.DOM_COMPONENT_INSTANCE_PROPERTY] = component);\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/bind-dom-node-to-component-instance.js?')},"./node_modules/riot/esm/core/component-dom-selectors.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "COMPONENT_DOM_SELECTORS": () => (/* binding */ COMPONENT_DOM_SELECTORS)\n/* harmony export */ });\n/* harmony import */ var _dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/bianco.query/index.next.js */ "./node_modules/riot/esm/dependencies/bianco.query/index.next.js");\n/* Riot v9.4.3, @license MIT */\n\n\nconst COMPONENT_DOM_SELECTORS = Object.freeze({\n // component helpers\n $(selector) {\n return (0,_dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__["default"])(selector, this.root)[0]\n },\n $$(selector) {\n return (0,_dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__["default"])(selector, this.root)\n },\n});\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/component-dom-selectors.js?')},"./node_modules/riot/esm/core/component-lifecycle-methods.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "COMPONENT_LIFECYCLE_METHODS": () => (/* binding */ COMPONENT_LIFECYCLE_METHODS)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\nconst COMPONENT_LIFECYCLE_METHODS = Object.freeze({\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.SHOULD_UPDATE_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_BEFORE_MOUNT_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_MOUNTED_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_BEFORE_UPDATE_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_UPDATED_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_BEFORE_UNMOUNT_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.ON_UNMOUNTED_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n});\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/component-lifecycle-methods.js?')},"./node_modules/riot/esm/core/component-template-factory.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "componentTemplateFactory": () => (/* binding */ componentTemplateFactory)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_dom_bindings_dist_dom_bindings_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/dom-bindings/dist/dom-bindings.js */ "./node_modules/riot/esm/dependencies/@riotjs/dom-bindings/dist/dom-bindings.js");\n/* harmony import */ var _dependencies_riotjs_util_expression_types_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/expression-types.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/expression-types.js");\n/* harmony import */ var _dependencies_riotjs_util_binding_types_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/binding-types.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/binding-types.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n/**\n * Factory function to create the component templates only once\n * @param {Function} template - component template creation function\n * @param {RiotComponentWrapper} componentWrapper - riot compiler generated object\n * @param {Function} getChildComponent - getter function to return the children components\n * @returns {TemplateChunk} template chunk object\n */\nfunction componentTemplateFactory(\n template,\n componentWrapper,\n getChildComponent,\n) {\n return template(\n _dependencies_riotjs_dom_bindings_dist_dom_bindings_js__WEBPACK_IMPORTED_MODULE_0__.template,\n _dependencies_riotjs_util_expression_types_js__WEBPACK_IMPORTED_MODULE_1__["default"],\n _dependencies_riotjs_util_binding_types_js__WEBPACK_IMPORTED_MODULE_2__["default"],\n getChildComponent,\n )\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/component-template-factory.js?')},"./node_modules/riot/esm/core/compute-component-state.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "computeComponentState": () => (/* binding */ computeComponentState)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* Riot v9.4.3, @license MIT */\n\n\n/**\n * Compute the component current state merging it with its previous state\n * @param {Object} oldState - previous state object\n * @param {Object} newState - new state given to the `update` call\n * @returns {Object} new object state\n */\nfunction computeComponentState(oldState, newState) {\n return {\n ...oldState,\n ...(0,_dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__.callOrAssign)(newState),\n }\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/compute-component-state.js?')},"./node_modules/riot/esm/core/compute-initial-props.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "computeInitialProps": () => (/* binding */ computeInitialProps)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/dom.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/dom.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n/**\n * Evaluate the component properties either from its real attributes or from its initial user properties\n * @param {HTMLElement} element - component root\n * @param {Object} initialProps - initial props\n * @returns {Object} component props key value pairs\n */\nfunction computeInitialProps(element, initialProps = {}) {\n return {\n ...(0,_dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_0__.DOMattributesToObject)(element),\n ...(0,_dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.callOrAssign)(initialProps),\n }\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/compute-initial-props.js?')},"./node_modules/riot/esm/core/create-attribute-bindings.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "createAttributeBindings": () => (/* binding */ createAttributeBindings)\n/* harmony export */ });\n/* harmony import */ var _create_core_api_methods_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./create-core-api-methods.js */ "./node_modules/riot/esm/core/create-core-api-methods.js");\n/* harmony import */ var _dependencies_riotjs_dom_bindings_dist_dom_bindings_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/dom-bindings/dist/dom-bindings.js */ "./node_modules/riot/esm/dependencies/@riotjs/dom-bindings/dist/dom-bindings.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n/**\n * Create the bindings to update the component attributes\n * @param {HTMLElement} node - node where we will bind the expressions\n * @param {Array} attributes - list of attribute bindings\n * @returns {TemplateChunk} - template bindings object\n */\nfunction createAttributeBindings(node, attributes = []) {\n const expressions = attributes.map((a) => (0,_dependencies_riotjs_dom_bindings_dist_dom_bindings_js__WEBPACK_IMPORTED_MODULE_0__.createExpression)(node, a));\n const binding = {};\n\n return Object.assign(binding, {\n expressions,\n ...(0,_create_core_api_methods_js__WEBPACK_IMPORTED_MODULE_1__.createCoreAPIMethods)((method) => (scope) => {\n expressions.forEach((e) => e[method](scope));\n\n return binding\n }),\n })\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/create-attribute-bindings.js?')},"./node_modules/riot/esm/core/create-component-from-wrapper.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "createComponentFromWrapper": () => (/* binding */ createComponentFromWrapper)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_strings_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/strings.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/strings.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* harmony import */ var _dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../dependencies/@riotjs/util/misc.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/misc.js");\n/* harmony import */ var _mocked_template_interface_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./mocked-template-interface.js */ "./node_modules/riot/esm/core/mocked-template-interface.js");\n/* harmony import */ var _component_template_factory_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./component-template-factory.js */ "./node_modules/riot/esm/core/component-template-factory.js");\n/* harmony import */ var _create_pure_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./create-pure-component.js */ "./node_modules/riot/esm/core/create-pure-component.js");\n/* harmony import */ var _instantiate_component_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./instantiate-component.js */ "./node_modules/riot/esm/core/instantiate-component.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n\n\n\n\n\n/**\n * Create the subcomponents that can be included inside a tag in runtime\n * @param {Object} components - components imported in runtime\n * @returns {Object} all the components transformed into Riot.Component factory functions\n */\nfunction createChildrenComponentsObject(components = {}) {\n return Object.entries((0,_dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__.callOrAssign)(components)).reduce(\n (acc, [key, value]) => {\n acc[(0,_dependencies_riotjs_util_strings_js__WEBPACK_IMPORTED_MODULE_1__.camelToDashCase)(key)] = createComponentFromWrapper(value);\n return acc\n },\n {},\n )\n}\n\n/**\n * Create the getter function to render the child components\n * @param {RiotComponentWrapper} componentWrapper - riot compiler generated object\n * @returns {Function} function returning the component factory function\n */\nconst createChildComponentGetter = (componentWrapper) => {\n const childrenComponents = createChildrenComponentsObject(\n componentWrapper.exports ? componentWrapper.exports.components : {},\n );\n\n return (name) => {\n // improve support for recursive components\n if (name === componentWrapper.name)\n return memoizedCreateComponentFromWrapper(componentWrapper)\n // return the registered components\n return childrenComponents[name] || _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_2__.COMPONENTS_IMPLEMENTATION_MAP.get(name)\n }\n};\n\n/**\n * Performance optimization for the recursive components\n * @param {RiotComponentWrapper} componentWrapper - riot compiler generated object\n * @returns {Object} component like interface\n */\nconst memoizedCreateComponentFromWrapper = (0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_3__.memoize)(createComponentFromWrapper);\n\n/**\n * Create the component interface needed for the @riotjs/dom-bindings tag bindings\n * @param {RiotComponentWrapper} componentWrapper - riot compiler generated object\n * @param {string} componentWrapper.css - component css\n * @param {Function} componentWrapper.template - function that will return the dom-bindings template function\n * @param {Object} componentWrapper.exports - component interface\n * @param {string} componentWrapper.name - component name\n * @returns {Object} component like interface\n */\nfunction createComponentFromWrapper(componentWrapper) {\n const { css, template, exports, name } = componentWrapper;\n const templateFn = template\n ? (0,_component_template_factory_js__WEBPACK_IMPORTED_MODULE_4__.componentTemplateFactory)(\n template,\n componentWrapper,\n createChildComponentGetter(componentWrapper),\n )\n : _mocked_template_interface_js__WEBPACK_IMPORTED_MODULE_5__.MOCKED_TEMPLATE_INTERFACE;\n\n return ({ slots, attributes, props }) => {\n // pure components rendering will be managed by the end user\n if (exports && exports[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_2__.IS_PURE_SYMBOL])\n return (0,_create_pure_component_js__WEBPACK_IMPORTED_MODULE_6__.createPureComponent)(exports, {\n slots,\n attributes,\n props,\n css,\n template,\n })\n\n const componentAPI = (0,_dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__.callOrAssign)(exports) || {};\n\n const component = (0,_instantiate_component_js__WEBPACK_IMPORTED_MODULE_7__.instantiateComponent)({\n css,\n template: templateFn,\n componentAPI,\n name,\n })({ slots, attributes, props });\n\n // notice that for the components created via tag binding\n // we need to invert the mount (state/parentScope) arguments\n // the template bindings will only forward the parentScope updates\n // and never deal with the component state\n return {\n mount(element, parentScope, state) {\n return component.mount(element, state, parentScope)\n },\n update(parentScope, state) {\n return component.update(state, parentScope)\n },\n unmount(preserveRoot) {\n return component.unmount(preserveRoot)\n },\n }\n }\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/create-component-from-wrapper.js?')},"./node_modules/riot/esm/core/create-core-api-methods.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "createCoreAPIMethods": () => (/* binding */ createCoreAPIMethods)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* Riot v9.4.3, @license MIT */\n\n\n/**\n * Wrap the Riot.js core API methods using a mapping function\n * @param {Function} mapFunction - lifting function\n * @returns {Object} an object having the { mount, update, unmount } functions\n */\nfunction createCoreAPIMethods(mapFunction) {\n return [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.MOUNT_METHOD_KEY, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UPDATE_METHOD_KEY, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UNMOUNT_METHOD_KEY].reduce(\n (acc, method) => {\n acc[method] = mapFunction(method);\n\n return acc\n },\n {},\n )\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/create-core-api-methods.js?')},"./node_modules/riot/esm/core/create-pure-component.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "createPureComponent": () => (/* binding */ createPureComponent)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/misc.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/misc.js");\n/* harmony import */ var _dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/objects.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/objects.js");\n/* harmony import */ var _pure_component_api_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./pure-component-api.js */ "./node_modules/riot/esm/core/pure-component-api.js");\n/* harmony import */ var _bind_dom_node_to_component_instance_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bind-dom-node-to-component-instance.js */ "./node_modules/riot/esm/core/bind-dom-node-to-component-instance.js");\n/* harmony import */ var _create_core_api_methods_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./create-core-api-methods.js */ "./node_modules/riot/esm/core/create-core-api-methods.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n\n\n\n/**\n * Create a pure component\n * @param {Function} pureFactoryFunction - pure component factory function\n * @param {Array} options.slots - component slots\n * @param {Array} options.attributes - component attributes\n * @param {Array} options.template - template factory function\n * @param {Array} options.template - template factory function\n * @param {any} options.props - initial component properties\n * @returns {Object} pure component object\n */\nfunction createPureComponent(\n pureFactoryFunction,\n { slots, attributes, props, css, template },\n) {\n if (template) (0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_0__.panic)(\'Pure components can not have html\');\n if (css) (0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_0__.panic)(\'Pure components do not have css\');\n\n const component = (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_1__.defineDefaults)(\n pureFactoryFunction({ slots, attributes, props }),\n _pure_component_api_js__WEBPACK_IMPORTED_MODULE_2__.PURE_COMPONENT_API,\n );\n\n return (0,_create_core_api_methods_js__WEBPACK_IMPORTED_MODULE_3__.createCoreAPIMethods)((method) => (...args) => {\n // intercept the mount calls to bind the DOM node to the pure object created\n // see also https://github.com/riot/riot/issues/2806\n if (method === _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.MOUNT_METHOD_KEY) {\n const [element] = args;\n // mark this node as pure element\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_1__.defineProperty)(element, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_PURE_SYMBOL, true);\n (0,_bind_dom_node_to_component_instance_js__WEBPACK_IMPORTED_MODULE_5__.bindDOMNodeToComponentInstance)(element, component);\n }\n\n component[method](...args);\n\n return component\n })\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/create-pure-component.js?')},"./node_modules/riot/esm/core/css-manager.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "CSS_BY_NAME": () => (/* binding */ CSS_BY_NAME),\n/* harmony export */ "STYLE_NODE_SELECTOR": () => (/* binding */ STYLE_NODE_SELECTOR),\n/* harmony export */ "default": () => (/* binding */ cssManager)\n/* harmony export */ });\n/* harmony import */ var _dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/bianco.query/index.next.js */ "./node_modules/riot/esm/dependencies/bianco.query/index.next.js");\n/* harmony import */ var _dependencies_bianco_attr_index_next_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/bianco.attr/index.next.js */ "./node_modules/riot/esm/dependencies/bianco.attr/index.next.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\nconst CSS_BY_NAME = new Map();\nconst STYLE_NODE_SELECTOR = \'style[riot]\';\n\n// memoized curried function\nconst getStyleNode = ((style) => {\n return () => {\n // lazy evaluation:\n // if this function was already called before\n // we return its cached result\n if (style) return style\n\n // create a new style element or use an existing one\n // and cache it internally\n style = (0,_dependencies_bianco_query_index_next_js__WEBPACK_IMPORTED_MODULE_0__["default"])(STYLE_NODE_SELECTOR)[0] || document.createElement(\'style\');\n (0,_dependencies_bianco_attr_index_next_js__WEBPACK_IMPORTED_MODULE_1__.set)(style, \'type\', \'text/css\');\n\n /* istanbul ignore next */\n if (!style.parentNode) document.head.appendChild(style);\n\n return style\n }\n})();\n\n/**\n * Object that will be used to inject and manage the css of every tag instance\n */\nconst cssManager = {\n CSS_BY_NAME,\n /**\n * Save a tag style to be later injected into DOM\n * @param { string } name - if it\'s passed we will map the css to a tagname\n * @param { string } css - css string\n * @returns {Object} self\n */\n add(name, css) {\n if (!CSS_BY_NAME.has(name)) {\n CSS_BY_NAME.set(name, css);\n this.inject();\n }\n\n return this\n },\n /**\n * Inject all previously saved tag styles into DOM\n * innerHTML seems slow: http://jsperf.com/riot-insert-style\n * @returns {Object} self\n */\n inject() {\n getStyleNode().innerHTML = [...CSS_BY_NAME.values()].join(\'\\n\');\n return this\n },\n\n /**\n * Remove a tag style from the DOM\n * @param {string} name a registered tagname\n * @returns {Object} self\n */\n remove(name) {\n if (CSS_BY_NAME.has(name)) {\n CSS_BY_NAME.delete(name);\n this.inject();\n }\n\n return this\n },\n};\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/css-manager.js?')},"./node_modules/riot/esm/core/instantiate-component.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "instantiateComponent": () => (/* binding */ instantiateComponent)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../dependencies/@riotjs/util/objects.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/objects.js");\n/* harmony import */ var _component_dom_selectors_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./component-dom-selectors.js */ "./node_modules/riot/esm/core/component-dom-selectors.js");\n/* harmony import */ var _component_lifecycle_methods_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./component-lifecycle-methods.js */ "./node_modules/riot/esm/core/component-lifecycle-methods.js");\n/* harmony import */ var _css_manager_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css-manager.js */ "./node_modules/riot/esm/core/css-manager.js");\n/* harmony import */ var _dependencies_curri_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/curri/index.js */ "./node_modules/riot/esm/dependencies/curri/index.js");\n/* harmony import */ var _manage_component_lifecycle_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./manage-component-lifecycle.js */ "./node_modules/riot/esm/core/manage-component-lifecycle.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n\n\n\n\n/**\n * Component definition function\n * @param {Object} implementation - the component implementation will be generated via compiler\n * @param {Object} component - the component initial properties\n * @returns {Object} a new component implementation object\n */\nfunction instantiateComponent({ css, template, componentAPI, name }) {\n // add the component css into the DOM\n if (css && name) _css_manager_js__WEBPACK_IMPORTED_MODULE_0__["default"].add(name, css);\n\n return (0,_dependencies_curri_index_js__WEBPACK_IMPORTED_MODULE_1__["default"])(_manage_component_lifecycle_js__WEBPACK_IMPORTED_MODULE_2__.manageComponentLifecycle)(\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_3__.defineProperties)(\n // set the component defaults without overriding the original component API\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_3__.defineDefaults)(componentAPI, {\n ..._component_lifecycle_methods_js__WEBPACK_IMPORTED_MODULE_4__.COMPONENT_LIFECYCLE_METHODS,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_5__.PROPS_KEY]: {},\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_5__.STATE_KEY]: {},\n }),\n {\n // defined during the component creation\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_5__.SLOTS_KEY]: null,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_5__.ROOT_KEY]: null,\n // these properties should not be overriden\n ..._component_dom_selectors_js__WEBPACK_IMPORTED_MODULE_6__.COMPONENT_DOM_SELECTORS,\n name,\n css,\n template,\n },\n ),\n )\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/instantiate-component.js?')},"./node_modules/riot/esm/core/manage-component-lifecycle.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "manageComponentLifecycle": () => (/* binding */ manageComponentLifecycle)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_checks_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../dependencies/@riotjs/util/checks.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/checks.js");\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../dependencies/@riotjs/util/dom.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/dom.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* harmony import */ var _dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../dependencies/@riotjs/util/misc.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/misc.js");\n/* harmony import */ var _dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/objects.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/objects.js");\n/* harmony import */ var _add_css_hook_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./add-css-hook.js */ "./node_modules/riot/esm/core/add-css-hook.js");\n/* harmony import */ var _bind_dom_node_to_component_instance_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./bind-dom-node-to-component-instance.js */ "./node_modules/riot/esm/core/bind-dom-node-to-component-instance.js");\n/* harmony import */ var _compute_component_state_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./compute-component-state.js */ "./node_modules/riot/esm/core/compute-component-state.js");\n/* harmony import */ var _compute_initial_props_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./compute-initial-props.js */ "./node_modules/riot/esm/core/compute-initial-props.js");\n/* harmony import */ var _create_attribute_bindings_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./create-attribute-bindings.js */ "./node_modules/riot/esm/core/create-attribute-bindings.js");\n/* harmony import */ var _run_plugins_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./run-plugins.js */ "./node_modules/riot/esm/core/run-plugins.js");\n/* harmony import */ var _utils_get_root_computed_attribute_names_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils/get-root-computed-attribute-names.js */ "./node_modules/riot/esm/utils/get-root-computed-attribute-names.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Component creation factory function that will enhance the user provided API\n * @param {Object} component - a component implementation previously defined\n * @param {Array} options.slots - component slots generated via riot compiler\n * @param {Array} options.attributes - attribute expressions generated via riot compiler\n * @returns {Riot.Component} a riot component instance\n */\nfunction manageComponentLifecycle(\n component,\n { slots, attributes, props },\n) {\n return (0,_dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_0__.autobindMethods)(\n (0,_run_plugins_js__WEBPACK_IMPORTED_MODULE_1__.runPlugins)(\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperties)(\n (0,_dependencies_riotjs_util_checks_js__WEBPACK_IMPORTED_MODULE_3__.isObject)(component) ? Object.create(component) : component,\n {\n mount(element, state = {}, parentScope) {\n // any element mounted passing through this function can\'t be a pure component\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperty)(element, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_PURE_SYMBOL, false);\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PARENT_KEY_SYMBOL] = parentScope;\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ATTRIBUTES_KEY_SYMBOL] = (0,_create_attribute_bindings_js__WEBPACK_IMPORTED_MODULE_5__.createAttributeBindings)(\n element,\n attributes,\n ).mount(parentScope);\n\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperty)(\n this,\n _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY,\n Object.freeze({\n ...(0,_compute_initial_props_js__WEBPACK_IMPORTED_MODULE_6__.computeInitialProps)(element, props),\n ...(0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_7__.evaluateAttributeExpressions)(\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ATTRIBUTES_KEY_SYMBOL].expressions,\n ),\n }),\n );\n\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY] = (0,_compute_component_state_js__WEBPACK_IMPORTED_MODULE_8__.computeComponentState)(this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY], state);\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone();\n\n // link this object to the DOM node\n (0,_bind_dom_node_to_component_instance_js__WEBPACK_IMPORTED_MODULE_9__.bindDOMNodeToComponentInstance)(element, this);\n // add eventually the \'is\' attribute\n component.name && (0,_add_css_hook_js__WEBPACK_IMPORTED_MODULE_10__.addCssHook)(element, component.name);\n\n // define the root element\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperty)(this, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ROOT_KEY, element);\n // define the slots array\n (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperty)(this, _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.SLOTS_KEY, slots);\n\n // before mount lifecycle event\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_BEFORE_MOUNT_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n // mount the template\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_KEY_SYMBOL].mount(element, this, parentScope);\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_MOUNTED_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n\n return this\n },\n update(state = {}, parentScope) {\n if (parentScope) {\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PARENT_KEY_SYMBOL] = parentScope;\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ATTRIBUTES_KEY_SYMBOL].update(parentScope);\n }\n\n // get the attribute names that don\'t belong to the the props object\n // this will avoid recursive props rendering https://github.com/riot/riot/issues/2994\n const computedAttributeNames = (0,_utils_get_root_computed_attribute_names_js__WEBPACK_IMPORTED_MODULE_11__.getRootComputedAttributeNames)(\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_KEY_SYMBOL],\n );\n // filter out the computed attributes from the root node\n const staticRootAttributes = Array.from(\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ROOT_KEY].attributes,\n ).filter(({ name }) => !computedAttributeNames.includes(name));\n\n // evaluate the value of the static dom attributes\n const domNodeAttributes = (0,_dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_12__.DOMattributesToObject)({\n attributes: staticRootAttributes,\n });\n\n // Avoid adding the riot "is" directives to the component props\n // eslint-disable-next-line no-unused-vars\n const { [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_DIRECTIVE]: _, ...newProps } = {\n ...domNodeAttributes,\n ...(0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_7__.evaluateAttributeExpressions)(\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ATTRIBUTES_KEY_SYMBOL].expressions,\n ),\n };\n if (this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.SHOULD_UPDATE_KEY](newProps, this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY]) === false)\n return\n\n ;(0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.defineProperty)(\n this,\n _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY,\n Object.freeze({\n // only root components will merge their initial props with the new ones\n // children components will just get them overridden see also https://github.com/riot/riot/issues/2978\n ...(parentScope\n ? (0,_dependencies_riotjs_util_objects_js__WEBPACK_IMPORTED_MODULE_2__.pick)(this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], computedAttributeNames)\n : this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY]),\n ...newProps,\n }),\n );\n\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY] = (0,_compute_component_state_js__WEBPACK_IMPORTED_MODULE_8__.computeComponentState)(this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY], state);\n\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_BEFORE_UPDATE_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n\n // avoiding recursive updates\n // see also https://github.com/riot/riot/issues/2895\n if (!this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_COMPONENT_UPDATING]) {\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_COMPONENT_UPDATING] = true;\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_KEY_SYMBOL].update(this, this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PARENT_KEY_SYMBOL]);\n }\n\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_UPDATED_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.IS_COMPONENT_UPDATING] = false;\n\n return this\n },\n unmount(preserveRoot) {\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_BEFORE_UNMOUNT_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ATTRIBUTES_KEY_SYMBOL].unmount();\n // if the preserveRoot is null the template html will be left untouched\n // in that case the DOM cleanup will happen differently from a parent node\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_KEY_SYMBOL].unmount(\n this,\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PARENT_KEY_SYMBOL],\n preserveRoot === null ? null : !preserveRoot,\n );\n this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.ON_UNMOUNTED_KEY](this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.PROPS_KEY], this[_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_4__.STATE_KEY]);\n\n return this\n },\n },\n ),\n ),\n Object.keys(component).filter((prop) => (0,_dependencies_riotjs_util_checks_js__WEBPACK_IMPORTED_MODULE_3__.isFunction)(component[prop])),\n )\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/manage-component-lifecycle.js?')},"./node_modules/riot/esm/core/mocked-template-interface.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "MOCKED_TEMPLATE_INTERFACE": () => (/* binding */ MOCKED_TEMPLATE_INTERFACE)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/dom.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/dom.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n// Components without template use a mocked template interface with some basic functionalities to\n// guarantee consistent rendering behaviour see https://github.com/riot/riot/issues/2984\nconst MOCKED_TEMPLATE_INTERFACE = {\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.MOUNT_METHOD_KEY](el) {\n this.el = el;\n },\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UPDATE_METHOD_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UNMOUNT_METHOD_KEY](_, __, mustRemoveRoot = false) {\n if (mustRemoveRoot) (0,_dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_2__.removeChild)(this.el);\n else if (!mustRemoveRoot) (0,_dependencies_riotjs_util_dom_js__WEBPACK_IMPORTED_MODULE_2__.cleanNode)(this.el);\n },\n clone() {\n return { ...this }\n },\n createDOM: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n};\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/mocked-template-interface.js?')},"./node_modules/riot/esm/core/mount-component.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "mountComponent": () => (/* binding */ mountComponent)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dependencies/@riotjs/util/misc.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/misc.js");\n/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/riot/esm/utils/dom.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\n\n/**\n * Component initialization function starting from a DOM node\n * @param {HTMLElement} element - element to upgrade\n * @param {Object} initialProps - initial component properties\n * @param {string} componentName - component id\n * @param {Array} slots - component slots\n * @returns {Object} a new component instance bound to a DOM node\n */\nfunction mountComponent(element, initialProps, componentName, slots) {\n const name = componentName || (0,_utils_dom_js__WEBPACK_IMPORTED_MODULE_0__.getName)(element);\n if (!_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_1__.COMPONENTS_IMPLEMENTATION_MAP.has(name))\n (0,_dependencies_riotjs_util_misc_js__WEBPACK_IMPORTED_MODULE_2__.panic)(`The component named "${name}" was never registered`);\n\n const component = _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_1__.COMPONENTS_IMPLEMENTATION_MAP.get(name)({\n props: initialProps,\n slots,\n });\n\n return component.mount(element)\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/mount-component.js?')},"./node_modules/riot/esm/core/pure-component-api.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "PURE_COMPONENT_API": () => (/* binding */ PURE_COMPONENT_API)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* harmony import */ var _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dependencies/@riotjs/util/functions.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/functions.js");\n/* Riot v9.4.3, @license MIT */\n\n\n\nconst PURE_COMPONENT_API = Object.freeze({\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.MOUNT_METHOD_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UPDATE_METHOD_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n [_dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.UNMOUNT_METHOD_KEY]: _dependencies_riotjs_util_functions_js__WEBPACK_IMPORTED_MODULE_1__.noop,\n});\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/pure-component-api.js?')},"./node_modules/riot/esm/core/run-plugins.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "runPlugins": () => (/* binding */ runPlugins)\n/* harmony export */ });\n/* harmony import */ var _dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../dependencies/@riotjs/util/constants.js */ "./node_modules/riot/esm/dependencies/@riotjs/util/constants.js");\n/* Riot v9.4.3, @license MIT */\n\n\n/**\n * Run the component instance through all the plugins set by the user\n * @param {Object} component - component instance\n * @returns {Object} the component enhanced by the plugins\n */\nfunction runPlugins(component) {\n return [..._dependencies_riotjs_util_constants_js__WEBPACK_IMPORTED_MODULE_0__.PLUGINS_SET].reduce((c, fn) => fn(c) || c, component)\n}\n\n\n\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/./node_modules/riot/esm/core/run-plugins.js?')},"./node_modules/riot/esm/dependencies/@riotjs/dom-bindings/dist/dom-bindings.js":(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"bindingTypes\": () => (/* reexport safe */ _util_binding_types_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]),\n/* harmony export */ \"createBinding\": () => (/* binding */ create$1),\n/* harmony export */ \"createExpression\": () => (/* binding */ create$4),\n/* harmony export */ \"expressionTypes\": () => (/* reexport safe */ _util_expression_types_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]),\n/* harmony export */ \"template\": () => (/* binding */ create)\n/* harmony export */ });\n/* harmony import */ var _util_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../util/dom.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/dom.js\");\n/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/constants.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/constants.js\");\n/* harmony import */ var _util_binding_types_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../util/binding-types.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/binding-types.js\");\n/* harmony import */ var _util_expression_types_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../util/expression-types.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/expression-types.js\");\n/* harmony import */ var _util_objects_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../util/objects.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/objects.js\");\n/* harmony import */ var _util_checks_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../util/checks.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/checks.js\");\n/* harmony import */ var _util_misc_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../util/misc.js */ \"./node_modules/riot/esm/dependencies/@riotjs/util/misc.js\");\n/* Riot WIP, @license MIT */\n\n\n\n\n\n\n\n\n\n\nconst HEAD_SYMBOL = Symbol();\nconst TAIL_SYMBOL = Symbol();\nconst REF_ATTRIBUTE = 'ref';\n\n/**\n * Create the