@schukai/monster 3.56.1 → 3.57.0

package/source/dom/util/set-option-from-attribute.mjs

@@ -49,6 +49,7 @@ function setOptionFromAttribute(
 	mapping = {},
 	prefix = "data-monster-option-",
 ) {
+	
 	if (!(element instanceof HTMLElement)) return options;
 	if (!element.hasAttributes()) return options;
 
@@ -84,4 +85,4 @@ function setOptionFromAttribute(
 	finder.setVia(optionName, value);
 
 	return options;
-}
+} 

package/source/monster.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -93,9 +94,11 @@ export * from "./components/datatable/datatable/header.mjs";
 export * from "./components/datatable/pagination.mjs";
 export * from "./components/datatable/util.mjs";
 export * from "./components/datatable/filter.mjs";
+export * from "./components/datatable/save-button.mjs";
 export * from "./components/datatable/dataset.mjs";
 export * from "./components/datatable/embedded-pagination.mjs";
 export * from "./components/datatable/status.mjs";
+export * from "./components/datatable/change-button.mjs";
 export * from "./components/datatable/constants.mjs";
 export * from "./components/datatable/stylesheet/select-filter.mjs";
 export * from "./components/datatable/stylesheet/datasource.mjs";
@@ -105,10 +108,12 @@ export * from "./components/datatable/stylesheet/filter-date-range.mjs";
 export * from "./components/datatable/stylesheet/datatable.mjs";
 export * from "./components/datatable/stylesheet/pagination.mjs";
 export * from "./components/datatable/stylesheet/filter.mjs";
+export * from "./components/datatable/stylesheet/save-button.mjs";
 export * from "./components/datatable/stylesheet/dataset.mjs";
 export * from "./components/datatable/stylesheet/embedded-pagination.mjs";
 export * from "./components/datatable/stylesheet/filter-controls-defaults.mjs";
 export * from "./components/datatable/stylesheet/status.mjs";
+export * from "./components/datatable/stylesheet/change-button.mjs";
 export * from "./components/datatable/stylesheet/filter-range.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";

package/source/types/version.mjs

@@ -152,7 +152,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.56.1");
+	monsterVersion = new Version("3.57.0");
 
 	return monsterVersion;
 }

package/test/cases/components/form/select.mjs

@@ -175,7 +175,7 @@ describe('Select', function () {
 
                         done();
 
-                    }, 10)
+                    }, 100)
                 })
                 
                 mocks.appendChild(select);

package/test/cases/components/form/toggle-switch.mjs

@@ -0,0 +1,310 @@
+import { getGlobal } from "../../../../source/types/global.mjs";
+import chai from "chai"
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+let html2 = `
+    <div id="test2">
+         <monster-toggle-switch></monster-toggle-switch>
+    </div>
+`;
+
+let ToggleSwitch;
+
+describe('ToggleSwitch', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+
+            import("../../../../source/components/form/toggle-switch.mjs").then((m) => {
+                ToggleSwitch = m['ToggleSwitch'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('new ToggleSwitch', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('create from template', function () {
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html2;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-toggle-switch', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-toggle-switch');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of monster-toggle-switch', function () {
+                expect(document.createElement('monster-toggle-switch')).is.instanceof(ToggleSwitch);
+            });
+        });
+
+    });
+
+    describe('toggle', function () {
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        });
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('toggle to on', function () {
+
+            const toggleSwitch = document.createElement('monster-toggle-switch');
+
+            expect(toggleSwitch.value).is.equal('off');
+            expect(toggleSwitch.state).is.equal('off');
+
+            toggleSwitch.toggle();
+
+            expect(toggleSwitch.value).is.equal('on');
+            expect(toggleSwitch.state).is.equal('on');
+
+            toggleSwitch.toggle();
+
+            expect(toggleSwitch.value).is.equal('off');
+            expect(toggleSwitch.state).is.equal('off');
+        });
+
+        it('toggle on to off', function () {
+
+            const toggleSwitch = document.createElement('monster-toggle-switch');
+
+            toggleSwitch.toggleOn();
+
+            expect(toggleSwitch.value).is.equal('on');
+            expect(toggleSwitch.state).is.equal('on');
+
+            toggleSwitch.toggleOff();
+
+            expect(toggleSwitch.value).is.equal('off');
+            expect(toggleSwitch.state).is.equal('off');
+
+        });
+
+
+    });
+
+    describe('describe css', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        });
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('css toggle', function (done) {
+
+            /**
+             * new Control
+             */
+            const toggleSwitch = document.createElement('monster-toggle-switch');
+
+            /**
+             * set init value to on
+             */
+            toggleSwitch.value = "on";
+
+            /**
+             * insert DOM
+             */
+            document.getElementById('mocks').appendChild(toggleSwitch);
+
+            /**
+             * expect that classes.on is set to Element Switch
+             */
+            let hasClassA = toggleSwitch.shadowRoot.querySelectorAll('[data-monster-role="switch"]')[0].classList.contains(toggleSwitch.getOption('classes.on'));
+            expect(hasClassA).is.true;
+
+            /**
+            * switch off
+            */
+            toggleSwitch.value = "off";
+
+            /**
+             * Updater prozess runs in setTimeout
+             * self[internalSymbol].attachObserver();
+             */
+            setTimeout(() => {
+                
+                /**
+                * expect that classes.on is removed from Element Switch
+                */
+                let hasClassB  = toggleSwitch.shadowRoot.querySelectorAll('[data-monster-role="switch"]')[0].classList.contains(toggleSwitch.getOption('classes.on'));
+                expect(hasClassB).is.false;
+
+                /**
+                * expect that classes.off is set to Element Switch
+                */
+                let hasClassC  = toggleSwitch.shadowRoot.querySelectorAll('[data-monster-role="switch"]')[0].classList.contains(toggleSwitch.getOption('classes.off'));
+                expect(hasClassC).is.true;    
+
+
+                done();
+            }, 0);
+
+        })
+
+    });
+
+    describe('describe value', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        });
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+
+        })
+
+        it('the default value is off', function () {
+
+            /**
+             * new Control
+             */
+            let toggleSwitch = document.createElement('monster-toggle-switch');
+
+            /**
+             * the switch is off and provides the value for off
+             */
+            expect(toggleSwitch.value).is.equal('off');
+
+            /**
+             * the switch is off
+             */
+            expect(toggleSwitch.state).is.equal('off');
+
+        });
+
+        it('incorrect values are not accepted', function () {
+
+            let toggleSwitch = document.createElement('monster-toggle-switch');
+
+            /**
+             * define the values for on and off
+             */
+            toggleSwitch.setOption('values.on', 'true');
+            toggleSwitch.setOption('values.off', 'false');
+
+            /**
+             * This value is not "true" and not "false"
+             */
+            toggleSwitch.value = "test";
+
+            /**
+             * the switch is off and provides the value for off
+             */
+            expect(toggleSwitch.value).is.equal('false');
+
+            /**
+             * the switch is off
+             */
+            expect(toggleSwitch.state).is.equal('off');
+
+            /**
+            * disabled attribute is only set when the element has been mounted in the DOM
+            */
+            expect(toggleSwitch.hasAttribute('disabled')).is.false;
+
+            /**
+             * insert DOM
+             */
+            document.getElementById('mocks').appendChild(toggleSwitch);
+
+            /**
+            * now the element is disabled
+            */
+            expect(toggleSwitch.hasAttribute('disabled')).is.true;
+
+
+        });
+
+        it('correct values are accepted', function () {
+
+            const toggleSwitch = document.createElement('monster-toggle-switch');
+
+            /**
+             * define the values for on and off
+             */
+            toggleSwitch.setOption('values.on', 'true');
+            toggleSwitch.setOption('values.off', 'false');
+
+            /**
+             * This value is correct
+             */
+            toggleSwitch.value = "true";
+
+            /**
+             * the switch is on and provides the value for on
+             */
+            expect(toggleSwitch.value).is.equal('true');
+
+            /**
+             * the switch is on
+             */
+            expect(toggleSwitch.state).is.equal('on');
+
+            /**
+            * insert DOM
+            */
+            document.getElementById('mocks').appendChild(toggleSwitch);
+
+            /**
+             * disabled attribute is not set
+             */
+            expect(toggleSwitch.hasAttribute('disabled')).is.false;
+
+        });
+
+    });
+
+
+
+});

package/test/cases/components/form/tree-select.mjs

@@ -96,18 +96,11 @@ describe('Treeselect', function () {
                                           } ]`);
 
                                 resolve2(JSON.stringify(json))
-
-
                             })
-
-
                         }
                     });
                 })
-
             };
-
-
         })
 
         afterEach(() => {
@@ -174,7 +167,7 @@ describe('Treeselect', function () {
 
                         done();
 
-                    }, 10)
+                    }, 100)
                 })
                 
                 

package/test/cases/data/transformer.mjs

@@ -175,6 +175,22 @@ describe('Transformer', function () {
             ['index:a', new Map().set('a', 5), 5],
             ['substring:2:4', 'abcdefghijklmnop', 'cdef'],
             ['nop', 'abcdefghijklmnop', 'abcdefghijklmnop'],
+            ['set-toggle:c', 'a b c', 'a b'],
+            ['set-toggle:c', 'a b', 'a b c'],
+            ['set-set:c', 'a b', 'a b c'],
+            ['set-set:c', 'a b c', 'a b c'],
+            ['set-remove:c', 'a b c', 'a b'],
+            ['set-toggle:c:,', 'a,b,c', 'a,b'],
+            ['set-toggle:c:,', 'a,b', 'a,b,c'],
+            ['set-set:c:,', 'a,b', 'a,b,c'],
+            ['set-set:c:,', 'a,b,c', 'a,b,c'],
+            ['set-remove:c:,', 'a,b,c', 'a,b'],
+            ['set-toggle:c,d:,', 'a,b,c', 'a,b,d'],
+            ['set-toggle:c,d:,', 'a,b,c,d', 'a,b'],
+            ['set-toggle:c,d:,', 'a,b', 'a,b,c,d'],
+            ['set-set:c,d:,', 'a,b', 'a,b,c,d'],
+            ['set-set:c,d:,', 'a,b,c', 'a,b,c,d'],
+            ['set-remove:c:,', 'a,b,c', 'a,b'],
 
         ].forEach(function (data) {
 

package/test/cases/dom/customcontrol.mjs

@@ -19,7 +19,7 @@ describe('DOM', function () {
     let CustomControl, registerCustomElement, TestComponent, document, jsdomFlag;
 
     before(function (done) {
-        initJSDOM().then(() => {
+        initJSDOM({}).then(() => {
 
             import("element-internals-polyfill").then((m) => {
                 m.polyfill();
@@ -29,7 +29,7 @@ describe('DOM', function () {
             jsdomFlag = navigator.userAgent.includes("jsdom");
 
             import("../../../source/dom/customelement.mjs").then((m) => {
-               
+
                 registerCustomElement = m['registerCustomElement'];
 
 
@@ -55,10 +55,52 @@ describe('DOM', function () {
                 });
             }).catch((e) => {
                 done(e);
-            } );
+            });
         });
     })
 
+    describe('formDisabledCallback()', function () {
+        
+        let element
+        
+        beforeEach(() => {
+            try {
+                const TestComponent2 = class extends CustomControl {
+                    /**
+                     * A description of the entire function.
+                     *
+                     * @return {string} description of return value
+                     */
+                    static getTag() {
+                        return "monster-customcontrol2"
+                    }
+                }
+                registerCustomElement(TestComponent2)
+            } catch (e) {
+                expect(e).to.be.not.null;
+            }
+
+             element = document.createElement('monster-customcontrol2');
+
+        })
+        
+        afterEach(() => {
+
+        })
+
+        it('should return undefined', function () {
+            expect(element.formDisabledCallback()).to.be.undefined;
+            expect(element.hasAttribute('disabled')).to.be.false;
+            expect(element.formDisabledCallback(true)).to.be.undefined;
+            expect(element.hasAttribute('disabled')).to.be.true;
+            const d = element.getAttribute('disabled');
+            expect(d).to.not.be.null;
+            
+        });
+
+    })
+
+
     describe('CustomControl()', function () {
 
         beforeEach(() => {
@@ -76,13 +118,16 @@ describe('DOM', function () {
 
         describe('create', function () {
             it('should return custom-element object', function () {
+                let d
                 try {
-                    let d = new TestComponent();
+                    d = new TestComponent();
                 } catch (e) {
-                    expect(e).to.be.not.null;
+                    expect(e).to.be.null;
                 }
 
-                expect(typeof d).is.equal('undefined');
+                console.log(typeof d,"ssss");
+                expect(typeof d).is.equal('object');
+                
             });
         });
 
@@ -91,7 +136,7 @@ describe('DOM', function () {
 
                 let d = document.createElement('monster-customcontrol');
                 document.getElementById('test1').appendChild(d);
-                                
+
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
                 expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')
@@ -172,7 +217,7 @@ describe('DOM', function () {
 
                 let d = document.createElement('monster-customcontrol');
                 form.appendChild(d);
-                
+
             });
 
             it('name getter', function () {

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -1,11 +1,7 @@
 'use strict';
 
 import chai from "chai"
-// import {internalSymbol} from "../../../source/constants.mjs";
-// import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.mjs";
 import {getDocument} from "../../../source/dom/util.mjs";
-// import {ProxyObserver} from "../../../source/types/proxyobserver.mjs";
-// import {addObjectWithUpdaterToElement} from "../../../source/dom/updater.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 

package/test/cases/dom/customelement.mjs

@@ -2,10 +2,8 @@
 
 import chai from "chai"
 import {internalSymbol} from "../../../source/constants.mjs";
-import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.mjs";
 import {getDocument} from "../../../source/dom/util.mjs";
 import {ProxyObserver} from "../../../source/types/proxyobserver.mjs";
-import {addObjectWithUpdaterToElement} from "../../../source/dom/updater.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
@@ -27,34 +25,41 @@ const updaterSymbolKey = "@schukai/monster/dom/custom-element@@options-updater-l
 const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
 
 
-
 describe('DOM', function () {
 
-    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;
-
+    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2, assignUpdaterToElement,
+        addObjectWithUpdaterToElement;
 
     describe("assignUpdaterToElement", function () {
 
         before(function (done) {
-            initJSDOM().then(() => {
-                import("../../../source/dom/customelement.mjs").then((m) => {
-                    try {
-                        CustomElement = m['CustomElement'];
-                        assignUpdaterToElement= function (elements, object) {
-                            return addObjectWithUpdaterToElement.call(this, elements, updaterSymbolSymbol, object);
+            const options = {};
+            initJSDOM(options).then(() => {
+                import("../../../source/dom/updater.mjs").then((yy) => {
+                    addObjectWithUpdaterToElement = yy['addObjectWithUpdaterToElement'];
+                    import("../../../source/dom/customelement.mjs").then((m) => {
+                        try {
+                            CustomElement = m['CustomElement'];
+                            assignUpdaterToElement = function (elements, object) {
+                                return addObjectWithUpdaterToElement.call(this, elements, updaterSymbolSymbol, object);
+                            }
+
+
+                            document = getDocument();
+
+                            done()
+                        } catch (e) {
+                            done(e);
                         }
-                        
-                        
-                        document = getDocument();
 
-                        done()
-                    } catch (e) {
-                        done(e);
-                    }
 
+                    }).catch((e) => {
+                        done(e);
+                    });
 
+                }).catch((e) => {
+                    done(e);
                 });
-
             });
         })
 
@@ -71,7 +76,7 @@ describe('DOM', function () {
         /**
          * this test try to simulate the bug that was found in the assignUpdaterToElement function.
          * The bug was that the updater was not assigned to the element when the element was created.
-         * 
+         *
          * unfortunately, this test does not reproduce the bug.
          */
         it("should assign an updater to an element", function (done) {
@@ -98,9 +103,9 @@ describe('DOM', function () {
             expect(JSON.stringify(y)).to.equal('{"b":2}');
 
             const sy = updaterSymbolSymbol;
-            
+
             let v = element.getAttribute("data-monster-objectlink");
-            expect(v).to.equal('Symbol('+updaterSymbolKey+')');
+            expect(v).to.equal('Symbol(' + updaterSymbolKey + ')');
 
             const updater = element[sy];
 
@@ -126,7 +131,7 @@ describe('DOM', function () {
                 // <input data-monster-bind="path:a" id="test2" data-monster-attributes="value path:a" data-monster-objectlink="Symbol(@schukai/monster/dom/@@object-updater-link)" value="3">
 
                 expect(mockHTML.querySelector("#test2")).to.have.value('3')
-                expect(mockHTML.querySelector("#test2")).to.have.attribute('data-monster-objectlink', 'Symbol('+updaterSymbolKey+')')
+                expect(mockHTML.querySelector("#test2")).to.have.attribute('data-monster-objectlink', 'Symbol(' + updaterSymbolKey + ')')
                 //expect(mockHTML).to.have.html(resultHTML);
 
                 expect(element.value).to.equal("3");
@@ -140,11 +145,10 @@ describe('DOM', function () {
 
     })
 
-
     describe('CustomElement()', function () {
 
         before(function (done) {
-            initJSDOM().then(() => {
+            initJSDOM({}).then(() => {
 
                 import("../../../source/dom/customelement.mjs").then((m) => {
 
@@ -254,7 +258,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol('+updaterSymbolKey+')"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);