refactor: update dependencies

.github/workflows/test-on-pr-branch.yml

@@ -0,0 +1,55 @@
+name: Test on PR branch
+on: pull_request
+
+jobs:
+  unit:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install chromium
+
+      - name: Run unit tests
+        run: npm run-script test:unit
+  visual:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install chromium
+
+      - name: Run visual test
+        run: npm run-script test:visual
+
+      - name: Update screenshots
+        if: failure()
+        run: npm run test:update
+
+      - name: Upload failed screenshots as artifacts
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: failed_screenshots
+          path: |
+            screenshots/*/failed/
+            screenshots/*/baseline/

.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: Test
+on: [push, workflow_dispatch]
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install chromium
+
+      - name: Run tests
+        run: npm run test

.github/workflows/update-screenshots.yml

@@ -0,0 +1,37 @@
+name: Update Screenshots
+
+on: workflow_dispatch
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install chromium
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Update screenshots
+        if: failure()
+        run: npm run test:update
+
+      - name: Upload failed screenshots as artifacts
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: failed_screenshots
+          path: |
+            screenshots/*/failed/
+            screenshots/*/baseline/

demo/index.html

@@ -16,7 +16,7 @@
 }'></open-scd>
 
 <script type="module">
-import '@openscd/open-scd-core/open-scd.js';
+import '@openenergytools/open-scd-core/open-scd.js';
 
 const editor = document.querySelector('open-scd');
 const params = (new URL(document.location)).searchParams;
@@ -25,6 +25,8 @@
 }
 </script>
 
+<script polyfill="" scoped-custom-element-registry="">"createElement"in ShadowRoot.prototype||function(){"use strict";function t(t){var e=0;return function(){return e<t.length?{done:!1,value:t[e++]}:{done:!0}}}function e(e){var o="undefined"!=typeof Symbol&&Symbol.iterator&&e[Symbol.iterator];return o?o.call(e):{next:t(e)}}function o(t){if(!(t instanceof Array)){t=e(t);for(var o,n=[];!(o=t.next()).done;)n.push(o.value);t=n}return t}var n="function"==typeof Object.create?Object.create:function(t){function e(){}return e.prototype=t,new e};var r,i=function(t){t=["object"==typeof globalThis&&globalThis,t,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var e=0;e<t.length;++e){var o=t[e];if(o&&o.Math==Math)return o}throw Error("Cannot find global object")}(this),a=function(){if("undefined"!=typeof Reflect&&Reflect.construct){if(function(){function t(){}return new t,Reflect.construct(t,[],(function(){})),new t instanceof t}())return Reflect.construct;var t=Reflect.construct;return function(e,o,n){return e=t(e,o),n&&Reflect.setPrototypeOf(e,n.prototype),e}}return function(t,e,o){return void 0===o&&(o=t),o=n(o.prototype||Object.prototype),Function.prototype.apply.call(t,o,e)||o}}();if("function"==typeof Object.setPrototypeOf)r=Object.setPrototypeOf;else{var l;t:{var c={};try{c.__proto__={a:!0},l=c.a;break t}catch(t){}l=!1}r=l?function(t,e){if(t.__proto__=e,t.__proto__!==e)throw new TypeError(t+" is not extensible");return t}:null}var s=r;if(!ShadowRoot.prototype.createElement){var p,u=window.HTMLElement,f=window.customElements.define,d=window.customElements.get,h=window.customElements,m=new WeakMap,y=new WeakMap,b=new WeakMap,w=new WeakMap;window.CustomElementRegistry=function(){this.l=new Map,this.o=new Map,this.i=new Map,this.h=new Map},window.CustomElementRegistry.prototype.define=function(t,o){if(t=t.toLowerCase(),void 0!==this.j(t))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': the name \""+t+'" has already been used with this registry');if(void 0!==this.o.get(o))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry");var n=o.prototype.attributeChangedCallback,r=new Set(o.observedAttributes||[]);if(v(o,r,n),n={g:o,connectedCallback:o.prototype.connectedCallback,disconnectedCallback:o.prototype.disconnectedCallback,adoptedCallback:o.prototype.adoptedCallback,attributeChangedCallback:n,formAssociated:o.formAssociated,formAssociatedCallback:o.prototype.formAssociatedCallback,formDisabledCallback:o.prototype.formDisabledCallback,formResetCallback:o.prototype.formResetCallback,formStateRestoreCallback:o.prototype.formStateRestoreCallback,observedAttributes:r},this.l.set(t,n),this.o.set(o,n),(r=d.call(h,t))||(r=g(t),f.call(h,t,r)),this===window.customElements&&(b.set(o,n),n.s=r),r=this.h.get(t)){this.h.delete(t);for(var i=(r=e(r)).next();!i.done;i=r.next())i=i.value,y.delete(i),E(i,n,!0)}return void 0!==(n=this.i.get(t))&&(n.resolve(o),this.i.delete(t)),o},window.CustomElementRegistry.prototype.upgrade=function(){O.push(this),h.upgrade.apply(h,arguments),O.pop()},window.CustomElementRegistry.prototype.get=function(t){var e;return null==(e=this.l.get(t))?void 0:e.g},window.CustomElementRegistry.prototype.j=function(t){return this.l.get(t)},window.CustomElementRegistry.prototype.whenDefined=function(t){var e=this.j(t);if(void 0!==e)return Promise.resolve(e.g);var o=this.i.get(t);return void 0===o&&((o={}).promise=new Promise((function(t){return o.resolve=t})),this.i.set(t,o)),o.promise},window.CustomElementRegistry.prototype.m=function(t,e,o){var n=this.h.get(e);n||this.h.set(e,n=new Set),o?n.add(t):n.delete(t)},window.HTMLElement=function(){var t=p;if(t)return p=void 0,t;var e=b.get(this.constructor);if(!e)throw new TypeError("Illegal constructor (custom element class must be registered with global customElements registry to be newable)");return t=Reflect.construct(u,[],e.s),Object.setPrototypeOf(t,this.constructor.prototype),m.set(t,e),t},window.HTMLElement.prototype=u.prototype;var g=function(t){function e(){var e=Reflect.construct(u,[],this.constructor);Object.setPrototypeOf(e,HTMLElement.prototype);t:{var o=e.getRootNode();if(!(o===document||o instanceof ShadowRoot)){if((o=O[O.length-1])instanceof CustomElementRegistry){var n=o;break t}(o=o.getRootNode())===document||o instanceof ShadowRoot||(o=(null==(n=w.get(o))?void 0:n.getRootNode())||document)}n=o.customElements}return(o=(n=n||window.customElements).j(t))?E(e,o):y.set(e,n),e}return i.Object.defineProperty(e,"formAssociated",{configurable:!0,enumerable:!0,get:function(){return!0}}),e.prototype.connectedCallback=function(){var e=m.get(this);e?e.connectedCallback&&e.connectedCallback.apply(this,arguments):y.get(this).m(this,t,!0)},e.prototype.disconnectedCallback=function(){var e=m.get(this);e?e.disconnectedCallback&&e.disconnectedCallback.apply(this,arguments):y.get(this).m(this,t,!1)},e.prototype.adoptedCallback=function(){var t,e;null==(t=m.get(this))||null==(e=t.adoptedCallback)||e.apply(this,arguments)},e.prototype.formAssociatedCallback=function(){var t,e=m.get(this);e&&e.formAssociated&&(null==e||null==(t=e.formAssociatedCallback)||t.apply(this,arguments))},e.prototype.formDisabledCallback=function(){var t,e=m.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formDisabledCallback)||t.apply(this,arguments))},e.prototype.formResetCallback=function(){var t,e=m.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formResetCallback)||t.apply(this,arguments))},e.prototype.formStateRestoreCallback=function(){var t,e=m.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formStateRestoreCallback)||t.apply(this,arguments))},e},v=function(t,e,o){if(0!==e.size&&void 0!==o){var n=t.prototype.setAttribute;n&&(t.prototype.setAttribute=function(t,r){if(t=t.toLowerCase(),e.has(t)){var i=this.getAttribute(t);n.call(this,t,r),o.call(this,t,i,r)}else n.call(this,t,r)});var r=t.prototype.removeAttribute;r&&(t.prototype.removeAttribute=function(t){if(t=t.toLowerCase(),e.has(t)){var n=this.getAttribute(t);r.call(this,t),o.call(this,t,n,null)}else r.call(this,t)});var i=t.prototype.toggleAttribute;i&&(t.prototype.toggleAttribute=function(t,n){if(t=t.toLowerCase(),e.has(t)){var r=this.getAttribute(t);i.call(this,t,n),n=this.getAttribute(t),o.call(this,t,r,n)}else i.call(this,t,n)})}},C=function(t){var e=Object.getPrototypeOf(t);if(e!==window.HTMLElement)return e===u?Object.setPrototypeOf(t,window.HTMLElement):C(e)},E=function(t,e,o){o=void 0!==o&&o,Object.setPrototypeOf(t,e.g.prototype),m.set(t,e),p=t;try{new e.g}catch(t){C(e.g),new e.g}e.attributeChangedCallback&&e.observedAttributes.forEach((function(o){t.hasAttribute(o)&&e.attributeChangedCallback.call(t,o,null,t.getAttribute(o))})),o&&e.connectedCallback&&t.isConnected&&e.connectedCallback.call(t)},k=Element.prototype.attachShadow;Element.prototype.attachShadow=function(t){var e=k.apply(this,arguments);return t.customElements&&(e.customElements=t.customElements),e};var O=[document],R=function(t,e,o){var n=(o?Object.getPrototypeOf(o):t.prototype)[e];t.prototype[e]=function(){O.push(this);var t=n.apply(o||this,arguments);return void 0!==t&&w.set(t,this),O.pop(),t}};R(ShadowRoot,"createElement",document),R(ShadowRoot,"importNode",document),R(Element,"insertAdjacentHTML");var j=function(t){var e=Object.getOwnPropertyDescriptor(t.prototype,"innerHTML");Object.defineProperty(t.prototype,"innerHTML",Object.assign({},e,{set:function(t){O.push(this),e.set.call(this,t),O.pop()}}))};if(j(Element),j(ShadowRoot),Object.defineProperty(window,"customElements",{value:new CustomElementRegistry,configurable:!0,writable:!0}),window.ElementInternals&&window.ElementInternals.prototype.setFormValue){var A=new WeakMap,M=HTMLElement.prototype.attachInternals;HTMLElement.prototype.attachInternals=function(t){for(var e=[],n=0;n<arguments.length;++n)e[n]=arguments[n];return e=M.call.apply(M,[this].concat(o(e))),A.set(e,this),e},["setFormValue","setValidity","checkValidity","reportValidity"].forEach((function(t){var e=window.ElementInternals.prototype,n=e[t];e[t]=function(t){for(var e=[],r=0;r<arguments.length;++r)e[r]=arguments[r];if(r=A.get(this),!0===m.get(r).formAssociated)return null==n?void 0:n.call.apply(n,[this].concat(o(e)));throw new DOMException("Failed to execute "+n+" on 'ElementInternals': The target element is not a form-associated custom element.")}}));var P=function(t){var e=a(Array,[].concat(o(t)),this.constructor);return e.h=t,e},T=P,S=Array;if(T.prototype=n(S.prototype),T.prototype.constructor=T,s)s(T,S);else for(var L in S)if("prototype"!=L)if(Object.defineProperties){var x=Object.getOwnPropertyDescriptor(S,L);x&&Object.defineProperty(T,L,x)}else T[L]=S[L];T.u=S.prototype,i.Object.defineProperty(P.prototype,"value",{configurable:!0,enumerable:!0,get:function(){var t;return(null==(t=this.h.find((function(t){return!0===t.checked})))?void 0:t.value)||""}});var H=function(t){var e=this,o=new Map;t.forEach((function(t,n){var r=t.getAttribute("name"),i=o.get(r)||[];e[+n]=t,i.push(t),o.set(r,i)})),this.length=t.length,o.forEach((function(t,o){t&&(e[o]=1===t.length?t[0]:new P(t))}))};H.prototype.namedItem=function(t){return this[t]};var _=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"elements");Object.defineProperty(HTMLFormElement.prototype,"elements",{get:function(){for(var t=_.get.call(this,[]),o=[],n=(t=e(t)).next();!n.done;n=t.next()){n=n.value;var r=m.get(n);r&&!0!==r.formAssociated||o.push(n)}return new H(o)}})}}}.call("object"==typeof globalThis?globalThis:window)</script>
+
 <script>
   const _customElementsDefine = window.customElements.define;
   window.customElements.define = (name, cl, conf) => {
@@ -44,6 +46,16 @@
 }
 
 body {
+  --oscd-theme-primary: #2aa198;
+  --oscd-theme-secondary: #6c71c4;
+  --oscd-theme-error:  #dc322f;
+  --oscd-theme-base03:  #002b36;
+  --oscd-theme-base02: #073642;
+  --oscd-theme-base00:  #657b83;
+  --oscd-theme-base0:  #839496;
+  --oscd-theme-base1:  #93a1a1;
+  --oscd-theme-base2: #eee8d5;
+  --oscd-theme-base3: #fdf6e3;
   background: white;
 }
 </style>