v0.0.11: Added unit-tests, solved the key={...} problem, updated the build/watch configuration of CSX to be able to build minified and non-minified bundle outputs, as well as a CJS version of lib/ (for consuming in Node-environment, like Jest). The previous tests were renamed to examples, and should still need to be updated.

examples/pdf/assets/logo.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 1133.3333 392"
+   height="392"
+   width="1133.3333"
+   xml:space="preserve"
+   id="svg4485"
+   version="1.1"><metadata
+     id="metadata4491"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs4489"><clipPath
+       id="clipPath4501"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path4499"
+         d="M 0.06,293.854 H 849.394 V 0.06 H 0.06 Z" /></clipPath><clipPath
+       id="clipPath4515"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path4513"
+         d="M 0.06,293.854 H 849.394 V 0.06 H 0.06 Z" /></clipPath></defs><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,392)"
+     id="g4493"><g
+       id="g4495"><g
+         clip-path="url(#clipPath4501)"
+         id="g4497"><path
+           id="path4503"
+           style="fill:#43a998;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 849.394,160.098 833.52,42.32 285.572,0 263.592,160.098 h 585.802" /></g></g><g
+       id="text4507"
+       style="font-variant:normal;font-weight:900;font-size:91.8742981px;font-family:Simplo;-inkscape-font-specification:Simplo-Black;writing-mode:lr-tb;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="scale(1,-1)"
+       aria-label="LUMMEN"><path
+         id="path4534"
+         d="M 414.79861,-66.139618 H 366.61843 V -132.9369 h 17.22644 v 53.877459 h 30.95374 z" /><path
+         id="path4536"
+         d="m 483.61461,-90.319426 q 0,12.381497 -7.53656,18.97599 -7.53657,6.594493 -22.20595,6.594493 -14.66938,0 -22.20594,-6.594493 -7.49171,-6.594493 -7.49171,-18.931129 V -132.9369 h 17.31615 v 41.675404 q 0,6.953377 2.91594,10.362775 2.91593,3.409397 9.46556,3.409397 6.45991,0 9.42071,-3.274816 3.00565,-3.274816 3.00565,-10.497356 V -132.9369 h 17.31615 z" /><path
+         id="path4538"
+         d="m 569.79162,-66.139618 h -17.13671 v -44.725912 l -12.3815,29.024738 h -11.88803 l -12.3815,-29.024738 v 44.725912 h -16.2395 V -132.9369 h 20.00779 l 15.02826,33.510793 14.98341,-33.510793 h 20.00778 z" /><path
+         id="path4540"
+         d="m 656.82099,-66.139618 h -17.13671 v -44.725912 l -12.38149,29.024738 h -11.88803 l -12.3815,-29.024738 v 44.725912 h -16.2395 V -132.9369 h 20.00778 l 15.02827,33.510793 14.9834,-33.510793 h 20.00778 z" /><path
+         id="path4542"
+         d="M 722.13787,-66.139618 H 673.82312 V -132.9369 h 48.31475 v 12.91983 h -31.17804 v 11.52914 h 28.93502 v 12.919826 h -28.93502 v 16.508663 h 31.17804 z" /><path
+         id="path4544"
+         d="M 797.36892,-66.139618 H 780.77053 L 752.4187,-111.98705 v 45.847432 H 736.6278 V -132.9369 h 20.59097 l 24.35925,38.266006 V -132.9369 h 15.7909 z" /></g><g
+       id="g4509"><g
+         clip-path="url(#clipPath4515)"
+         id="g4511"><path
+           id="path4517"
+           style="fill:#7b7979;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 368.363,140.416 285.572,0 264.044,152.94 368.363,140.416" /><path
+           id="path4519"
+           style="fill:#00897e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,293.854 15.874,-111.118 352.489,-42.32 21.98,153.438 H 0" /></g></g><path
+       id="path4521"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="M 326.403,265.506 V 241.099 L 292,266.583 v -63.156 h 19.345 v 24.404 l 34.401,-25.482 v 63.157 h -19.343" /><path
+       id="path4523"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 261.052,227.149 h 25.056 v 15.564 h -25.056 v 5.812 h 25.499 v 16.999 h -44.817 v -62.085 h 44.913 v 17.535 h -25.595 v 6.175" /><path
+       id="path4525"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 212.916,224.493 c -2.776,-2.685 -5.994,-4.025 -9.846,-4.025 -3.936,0 -7.154,1.34 -9.929,4.025 -2.685,2.772 -4.028,6.086 -4.028,9.932 0,3.846 1.343,7.154 4.028,9.836 2.775,2.778 5.993,4.12 9.929,4.12 3.852,0 7.07,-1.342 9.846,-4.12 2.863,-2.682 4.2,-5.99 4.2,-9.836 0,-3.846 -1.337,-7.16 -4.2,-9.932 z m -9.846,43.302 c -9.211,0 -16.999,-3.313 -23.526,-9.842 -6.442,-6.44 -9.752,-14.317 -9.752,-23.528 0,-9.128 3.31,-17 9.752,-23.531 6.527,-6.443 14.315,-9.751 23.526,-9.751 9.217,0 17.006,3.308 23.537,9.751 6.529,6.531 9.834,14.403 9.834,23.531 0,9.211 -3.305,17.088 -9.834,23.528 -6.531,6.529 -14.32,9.842 -23.537,9.842" /><path
+       id="path4527"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 126.495,239.23 v 7.243 h 11.361 c 4.07,0 7.255,-3.245 7.321,-7.214 -0.066,-3.965 -3.251,-7.207 -7.321,-7.207 h -11.361 z m 30.322,-18.812 c 5.151,5.153 7.827,11.542 7.866,18.812 h 0.006 c 0,0.009 0,0.018 0,0.029 0,0.013 0,0.025 0,0.033 h -0.006 c -0.039,7.268 -2.715,13.663 -7.866,18.81 -5.186,5.188 -11.629,7.422 -18.961,7.422 h -30.778 v -62.082 h 19.417 v 9.554 h 9.974 l 20.613,-27.512 15.481,11.629 -16.764,22.382 c 0.336,0.303 0.691,0.592 1.018,0.923" /><path
+       id="path4529"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 101.633,234.478 c 0,0.274 0,0.539 0,0.811 0,0.892 0,3.771 0,3.771 H 69.73 v -12.308 h 10.78 c -0.538,-0.812 -1.164,-1.533 -1.884,-2.25 -2.697,-2.688 -6.023,-4.04 -9.884,-4.04 -3.862,0 -7.187,1.352 -9.968,4.04 -2.697,2.79 -4.046,6.115 -4.046,9.976 0,3.871 1.349,7.191 4.046,9.882 2.781,2.786 6.106,4.138 9.968,4.138 3.861,0 6.561,-0.807 9.256,-3.507 l 14.376,13.12 c -6.555,6.558 -14.376,9.881 -23.632,9.881 -9.164,0 -17.071,-3.323 -23.633,-9.881 -6.552,-6.467 -9.788,-14.38 -9.788,-23.633 0,-9.163 3.236,-17.07 9.788,-23.629 6.562,-6.47 14.469,-9.792 23.633,-9.792 9.256,0 17.077,3.322 23.632,9.792 6.559,6.559 9.259,14.466 9.259,23.629" /></g></svg>

examples/pdf/fonts.pcss

@@ -0,0 +1,106 @@
+/* DINPro */
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Light.otf');
+    font-weight: 200;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Italic.otf');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Bold.otf');
+    font-weight: 700;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-BoldItalic.otf');
+    font-weight: 700;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-Black.otf');
+    font-weight: 900;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro';
+    src: url('assets/fonts/DINPro-BlackItalic.otf');
+    font-weight: 900;
+    font-style: italic;
+}
+
+
+/* DINPro Condensed */
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondLight.otf');
+    font-weight: 200;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondIta.otf');
+    font-weight: normal;
+    font-style: italic;
+}
+
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondMedium.otf');
+    font-weight: 600;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondMediIta.otf');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBold.otf');
+    font-weight: 700;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBoldIta.otf');
+    font-weight: 700;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBlack.otf');
+    font-weight: 900;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'DINPro Condensed';
+    src: url('assets/fonts/DINPro-CondBlackIta.otf');
+    font-weight: 900;
+    font-style: italic;
+}

examples/pdf/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pastabuffet Groen Lummen</title>
+</head>
+<body>
+    <script type="module" src="./index.js"></script>
+</body>
+</html>

examples/pdf/index.jsx

@@ -0,0 +1,88 @@
+import kaartStyle from "./index.pcss";
+import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx";
+
+// Style
+document.head.appendChild(render(<style>{kaartStyle}</style>));
+
+// Kaart
+@defineElement("pasta-buffet-kaart")
+class PastaBuffetKaart extends CustomElement{
+    
+    @prop() eigenExemplaar;
+    
+    render(){
+        return <div className="kaart">
+            <div className="header">
+                <img src="assets/logo.svg" alt={"logo"} className="logo"/>
+                <div className="header-info">
+                    <div className="title">Pastabuffet</div>
+                    <div className="sub-title">Zondag 02/02/2020 vanaf 17u</div>
+                    <div className="sub-title">O.C De Link, Linkhoutstraat 194</div>
+                </div>
+            </div>
+            <div className="content">
+                <h3>Bestelling</h3>
+                <table className="order">
+                    <tr>
+                        <td className="product-name">Volwassenen</td>
+                        <td className="product-amount"><input type="text"/></td>
+                        <td className="product-multiplier">x</td>
+                        <td className="product-price">14,00€ =</td>
+                        <td className="product-total"><input type="text"/></td>
+                    </tr>
+                    <tr>
+                        <td className="product-name">Kinderen</td>
+                        <td className="product-amount"><input type="text"/></td>
+                        <td className="product-multiplier">x</td>
+                        <td className="product-price">8,00€ =</td>
+                        <td className="product-total"><input type="text"/></td>
+                    </tr>
+                    <tr>
+                        <td colSpan={3}/>
+                        <td className="total-label">Totaal =</td>
+                        <td className="order-total"><input type="text"/></td>
+                    </tr>
+                </table>
+        
+                <table className="account">
+                    <tr>
+                        <td className="product-name">Naam</td>
+                        <td className="product-input"><input type="text"/></td>
+                    </tr>
+                </table>
+        
+                <div className="payment-options">
+                    <div className="option">
+                        Cash betaald
+                        <input type="checkbox"/>
+                    </div>
+                    <div className="option">
+                        Overschrijving
+                        <input type="checkbox"/>
+                        BE50 9731 5197 8018
+                    </div>
+                </div>
+            </div>
+            <div className="footer">
+                {this.eigenExemplaar ? ([
+                    <div className="form-for">Eigen exemplaar</div>,
+                    <div className="contact">Contactpersoon: Peter Aerts 0499 26 54 99</div>
+                ]) : ([
+                    <div className="form-for">Exemplaar voor Groen Lummen</div>
+                ])}
+            </div>
+        </div>
+    }
+}
+
+// Kaarten
+document.body.appendChild(render(<div className="kaarten-print">
+    <div className="kaarten-pair">
+        <PastaBuffetKaart eigenExemplaar={true}/>
+        <PastaBuffetKaart/>
+    </div>
+    <div className="kaarten-pair">
+        <PastaBuffetKaart eigenExemplaar={true}/>
+        <PastaBuffetKaart/>
+    </div>
+</div>));

examples/pdf/index.pcss

@@ -0,0 +1,158 @@
+@import "./fonts.pcss";
+
+@page {
+    size: A4 landscape;
+    margin: 0;
+}
+
+@media print {
+    html {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: none !important;
+    }
+
+    body {
+        width: 297mm;
+        height: 210mm;
+        size: landscape A4;
+        border: none !important;
+        background: none !important;
+        padding: 0 !important;
+    }
+}
+
+html{
+    background: #aeaeae;
+    font-family: 'DINPro';
+    font-size: 10.5pt;
+}
+body{
+    background: white;
+    margin: 0;
+    display: flex;
+    width: 289mm;
+    height: 202mm;
+    border: 1px solid black;
+    padding: 4mm;
+}
+
+.kaarten-print{
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.kaarten-pair{
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: space-evenly;
+}
+
+.kaart{
+    display: flex;
+    flex-direction: column;
+    max-width: 148mm;
+    padding: 1em;
+
+    & .header{
+        display: flex;
+        flex-direction: row;
+
+        & .logo{
+            flex: 0 1 35%;
+            max-width: 35%;
+        }
+
+        & .header-info{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex: 1 1 auto;
+
+            & .title{
+                font-size: 200%;
+                font-weight: bold;
+            }
+
+            & .sub-title{
+               font-weight: 700;
+                color: #666;
+            }
+        }
+    }
+
+    & .content{
+        display: flex;
+        flex-direction: column;
+
+        & table{
+            margin-bottom: .75em;
+        }
+
+        & .order >tr >td{
+            padding-bottom: .25em;
+        }
+
+        & .product-name{
+            font-weight: 600;
+            width: 6em;
+        }
+        & .product-multiplier{
+            font-weight: 600;
+            width: 1em;
+        }
+        & .product-price, & .total-label{
+            font-weight: 600;
+            text-align: right;
+            width: 4em;
+        }
+
+        & .payment-options{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+
+            & .option{
+                padding: 0 0 1em;
+            }
+        }
+
+    }
+
+    & .footer{
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        & .form-for{
+            font-weight: bold;
+        }
+        & .contact{
+            font-size: 90%;
+        }
+
+    }
+}
+
+input[type=text]{
+    border: none;
+    border-bottom: 1px dashed darkgray;
+
+    width: calc(100% - 1em);
+}
+
+input[type=checkbox]{
+    -webkit-appearance: none;
+    border: 1px solid #999;
+    padding: 9px;
+    display: inline-block;
+    position: relative;
+    top: 6px;
+    margin: 3px 6px;
+}