development/test/cases/constraint/abstractoperator.mjs

+import {Base} from "../../../../application/source/types/base.mjs";
+import {AbstractOperator} from "../../../../application/source/constraints/abstractoperator.mjs";
+import {expect} from "chai"
+
+class AbstractConstraintMock extends Base {
+
+    constructor() {
+        super();
+    }
+
+    isValid(value) {
+        return Promise.reject(value);
+    }
+}
+
+
+describe('AbstractOperator', function () {
+    it('should throw an error when the constraint is not call with parameter', function (done) {
+        try {
+            new AbstractOperator()
+        } catch (e) {
+            done();
+        }
+    });
+
+    it('should throw not an error when the constraint is not call with parameter', function (done) {
+
+        try {
+            const c = new AbstractOperator(new AbstractConstraintMock(), new AbstractConstraintMock())    
+        } catch (e) {
+            done();
+        }
+        
+    
+
+    });
+});
+

development/test/cases/dom/resource.mjs

+'use strict';
+
+
+import {initJSDOM} from "../../util/jsdom.mjs";
+import {expect} from "chai"
+let Resource,DerivedResource;
+
+
+
+describe('Resource', function() {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("../../../../application/source/dom/resource.mjs").then((m) => {
+                Resource = m['Resource'];
+
+
+                DerivedResource = class  extends Resource {
+                    constructor() {
+                        super({
+                            "data-url": "http://example.com",
+                        });
+                    }
+
+                    static getURLAttribute() {
+                        return 'data-url';
+                    }
+                }                
+                
+                done()
+            });
+
+        });
+
+
+    })
+
+    describe('DerivedResource', function () {
+
+        it('should instanceof Resource', function () {
+            expect(new DerivedResource()).to.be.an.instanceof(Resource);
+        });
+
+    });
+
+
+});
\ No newline at end of file

development/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version('2.0.15')
+        monsterVersion = new Version('2.0.16')
 
         let m = getMonsterVersion();
 

development/test/cases/types/base.mjs

@@ -2,8 +2,29 @@
 
 import {expect} from "chai"
 import {Base} from "../../../../application/source/types/base.mjs";
+import {instanceSymbol} from "../../../../application/source/constants.mjs";
 
 
+
+class BaseDifferentRealm extends Object {
+    
+
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/types/base");
+    }
+
+
+}
+
+class Subclass extends BaseDifferentRealm {
+    constructor() {
+        super();
+    }
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/types/subclass");
+    }
+}
+
 describe('Base', function () {
 
     describe('new Base', function () {
@@ -18,4 +39,25 @@ describe('Base', function () {
 
     })
     
+    describe('instancof', function () {
+
+        it('is instance of Base', function () {
+            expect(new Base).to.be.instanceOf(Base);
+        });
+        
+        it('subclass instanceof', function () {
+            
+            if (new Subclass instanceof Base) {
+                expect(true).to.be.true;
+            } else  {
+                expect(false).to.be.true;
+            }
+            
+            
+            
+        });
+
+
+    })
+
 })
\ No newline at end of file

development/test/web/test.html

@@ -5,7 +5,7 @@
     <title>Mocha Monster</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="mocha.css"/>
-   <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+   <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
             src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,DataView,document,DocumentFragment,Element,Event,globalThis,HTMLDocument,HTMLTemplateElement,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.getOwnPropertyDescriptor,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.iterator,WeakMap,WeakSet"
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
@@ -14,8 +14,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 2.0.8</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 11. Aug 20:00:02 CEST 2022</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 2.0.16</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Do 29. Dez 14:29:19 CET 2022</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>

documentation/tutorial/dom-style-guide.md

-# Style Guide
-
-The style guide reflects the patterns and components that are the foundation of the Monster System.
-
-These patterns provide a common language and a consistent look and feel when developing 
-applications and products within the Monster ecosystem.
-
-## CSS Properties
-
-Where possible, components should use global uniform CSS properties to create a consistent look and feel.
-
-With the following script, you can see the list of all the CSS properties that are available 
-in the Monster UI Framework.
-
-```bash
-ag  -o --nofilename 'var\(\-\-monster[^)]*\)' | grep var | cut -d"," -f1 | cut -d"(" -f2 | sort | uniq
-```
-
-Actually, the following CSS properties are in use:
-
-
-```css
-
---monster-accent-color
---monster-bg-color
---monster-border-color
---monster-border-radius
---monster-border-radius)
---monster-border-width
---monster-btn-bg-color
---monster-btn-border-color
---monster-btn-color
---monster-color
---monster-color-activity
---monster-color-failed
---monster-color-successful
---monster-disabled-background-color
---monster-disabled-border-color
---monster-disabled-color
---monster-empty-state-background-color
---monster-empty-state-layout-padding-margin-bottom
---monster-empty-state-margin-top
---monster-empty-state-padding-bottom
---monster-empty-state-padding-left
---monster-empty-state-padding-right
---monster-empty-state-padding-top
---monster-font-family
---monster-hover-color
---monster-message-bg-color
---monster-message-border-color
---monster-message-border-radius
---monster-message-border-style
---monster-message-border-width
---monster-message-color
---monster-message-margin-bottom
---monster-message-margin-left
---monster-message-margin-right
---monster-message-margin-top
---monster-message-padding-bottom
---monster-message-padding-left
---monster-message-padding-right
---monster-message-padding-top
---monster-notify-duration
---monster-popper-witharrrow-distance
---monster-selected-color
-``` 
-
-
-### Colors
-
-[black, white, red, yellow, grey, pink, green](https://coolors.co/0a0f0d-ffffff-b00020-f6aa1c-656176-ff69b4-003d00)
-
-
-| Code                                      | Description  | 
-|-------------------------------------------|--------------| 
-| var(--monster-color, #0a0f0d)             | black        |
-| var(--monster-color-activity, #656176)    | grey         |
-| var(--monster-color-failed, #b00020)      | red          |
-| var(--monster-color-successful, #003d00)  | green        |
-| var(--monster-color-accent, #ff69b4)      | pink         |
-| var(--monster-color-dark, #0a0f0d)        | black        |
-| var(--monster-color-light, #ffffff)       | white        |
-| var(--monster-color-hover, #ff69b4)       | pink         |
-| var(--monster-color-highlight, f6aa1c)    | yellow       |
-| var(--monster-color-selected, #0a0f0d)    | black        |
-| var(--monster-color-disabled, #656176)    | grey         |
-| var(--monster-bg-color, #ffffff)          | white        |
-| var(--monster-bg-color-dark, #656176)     | grey         |
-| var(--monster-bg-color-light, #ffffff)    | white        |
-| var(--monster-bg-color-disabled, #656176) | grey         |
-| var(--monster-disabled-color)             | (deprecated) |
-| var(--monster-disabled-bg-color)          | (deprecated) |
-| var(--monster-hover-color)                | (deprecated) |
-| var(--monster-selected-color)             | (deprecated) |
-| var(--monster-accent-color)               | (deprecated) | 
-| var(--monster-disabled-background-color)  | (deprecated) |
-
-### Fonts
-
-```css
-font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
-    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
-``` 
-
-| Property                                                                                                                                        | Description | 
-|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------| 
-| var(--monster-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) |             |
-| var(--monster-font-size, calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)))                                                              |             |
-| var(--monster-font-weight                                                                                                                       |             |
-| var(--monster-font-weight-bold                                                                                                                  |             |
-| var(--monster-font-weight-light                                                                                                                 |             |
-| var(--monster-line-height, calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));                                                                                                                     |             |
-
-
-### Borders
-
-| Property                             | Description | 
-|--------------------------------------|-------------| 
-| var(--monster-border-color, #0a0f0d) | black       |
-| var(--monster-border-radius, 0)      |             |
-| var(--monster-border-style, solid)   |             |
-| var(--monster-border-width, 2px)     |             |
-
-### Shadows
-
-| Property                                                                                                               | Description |
-|------------------------------------------------------------------------------------------------------------------------|-------------|
-| var(--monster-text-shadow, none)                                                                                       |             |
-| var(--monster-box-shadow, box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;)  |             |
-

documentation/tutorial/tutorials.json

@@ -17,9 +17,6 @@
       "dom-based-templating-implementation": {
         "title": "DOM-based templating implementation"
       },
-      "dom-style-guide": {
-        "title": "Monster Style Guide"
-      },
       "how-to-write-a-customcontrol": {
         "title": "How to write a CustomControl"
       }

release.json

-{"version":"2.0.16"}
+{"version":"2.1.0"}