@schukai/monster 3.96.0 → 3.96.1

package/source/components/layout/tabs.mjs

@@ -145,9 +145,9 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  *
  * @fragments /fragments/components/layout/tabs/
  *
- * @example /examples/components/layout/tabs-simple
- * @example /examples/components/layout/tabs-active
- * @example /examples/components/layout/tabs-removable
+ * @example /examples/components/layout/tabs-simple Simple Tabs
+ * @example /examples/components/layout/tabs-active Active Tabs
+ * @example /examples/components/layout/tabs-removable Removable Tabs
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html

package/source/components/layout/width-toggle.mjs

@@ -59,7 +59,7 @@ const MODE_WIDE = "wide";
  *
  * @fragments /fragments/components/layout/width-toggle/
  *
- * @example /examples/components/layout/width-toggle-simple
+ * @example /examples/components/layout/width-toggle-simple Toggle Width
  *
  * @since 3.57.0
  * @copyright schukai GmbH

package/source/components/navigation/table-of-content.mjs

@@ -73,7 +73,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
  *
  * @fragments /fragments/components/form/table-of-content
  *
- * @example /examples/components/form/table-of-content-simple
+ * @example /examples/components/form/table-of-content-simple Table of content
  *
  * @since 3.65.0
  * @copyright schukai GmbH

package/source/components/notify/message.mjs

@@ -70,7 +70,7 @@ const removeEventHandlerSymbol = Symbol("removeEventHandler");
  *
  * @fragments /fragments/components/notify/message
  *
- * @example /examples/components/notify/message-simple
+ * @example /examples/components/notify/message-simple Message
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *

package/source/components/notify/notify.mjs

@@ -49,8 +49,8 @@ const queueSymbol = Symbol("queue");
  *
  * @fragments /fragments/components/notify/notify
  *
- * @example /examples/components/notify/notify-simple
- * @example /examples/components/notify/notify-inline
+ * @example /examples/components/notify/notify-simple Notify
+ * @example /examples/components/notify/notify-inline Inline Notify
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *

package/source/components/state/log.mjs

@@ -44,7 +44,7 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  *
  * @fragments /fragments/components/state/log
  *
- * @example /examples/components/state/log-simple
+ * @example /examples/components/state/log-simple Log
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *

package/source/components/state/state.mjs

@@ -27,7 +27,7 @@ export { State };
  *
  * @fragments /fragments/components/state/state
  *
- * @example /examples/components/state/state-simple
+ * @example /examples/components/state/state-simple State
  *
  * @since 1.5.0
  * @copyright schukai GmbH

package/source/components/style/theme.css

@@ -36,7 +36,7 @@
 	color: var(--monster-color-selection-1);
 }
 .monster-border-color-1 {
-	border-color: var(--monster-color-border-1);
+	border-color: var(--monster-color-primary-4);
 }
 .monster-color-neutral-1 {
 	color: var(--monster-color-primary-1);
@@ -119,7 +119,7 @@
 	color: var(--monster-color-selection-2);
 }
 .monster-border-color-2 {
-	border-color: var(--monster-color-border-2);
+	border-color: var(--monster-color-primary-3);
 }
 .monster-color-neutral-2 {
 	color: var(--monster-color-primary-2);
@@ -202,7 +202,7 @@
 	color: var(--monster-color-selection-3);
 }
 .monster-border-color-3 {
-	border-color: var(--monster-color-border-3);
+	border-color: var(--monster-color-primary-2);
 }
 .monster-color-neutral-3 {
 	color: var(--monster-color-primary-3);
@@ -285,7 +285,7 @@
 	color: var(--monster-color-selection-4);
 }
 .monster-border-color-4 {
-	border-color: var(--monster-color-border-4);
+	border-color: var(--monster-color-primary-1);
 }
 .monster-color-neutral-4 {
 	color: var(--monster-color-primary-4);

package/source/dom/constants.mjs

@@ -196,23 +196,26 @@ const ATTRIBUTE_UPDATER_BIND = `${ATTRIBUTE_PREFIX}bind`;
 /**
  * @type {string}
  * @license AGPLv3
- * @since 3.73.0
+ * @since 1.9.0
  */
-const ATTRIBUTE_FORM_BIND = `${ATTRIBUTE_PREFIX}form-bind`;
+const ATTRIBUTE_UPDATER_BIND_TYPE = `${ATTRIBUTE_UPDATER_BIND}-type`;
 
 /**
  * @type {string}
  * @license AGPLv3
+ * @deprecated since 2024-12-29
  * @since 3.73.0
  */
-const ATTRIBUTE_FORM_BIND_TYPE = `${ATTRIBUTE_PREFIX}form-bind-type`;
+const ATTRIBUTE_FORM_BIND = `${ATTRIBUTE_PREFIX}form-bind`;
 
 /**
  * @type {string}
  * @license AGPLv3
- * @since 1.9.0
+ * @since 3.73.0
+ * @deprecated since 2024-12-29
  */
-const ATTRIBUTE_UPDATER_BIND_TYPE = `${ATTRIBUTE_UPDATER_BIND}-type`;
+const ATTRIBUTE_FORM_BIND_TYPE = `${ATTRIBUTE_PREFIX}form-bind-type`;
+
 
 /**
  * @type {string}

package/source/dom/updater.mjs

@@ -74,7 +74,7 @@ class Updater extends Base {
 	 * @param {object|ProxyObserver|undefined} subject
 	 * @throws {TypeError} value is not a object
 	 * @throws {TypeError} value is not an instance of HTMLElement
-	 * @see {@link Monster.DOM.findDocumentTemplate}
+	 * @see {@link findDocumentTemplate}
 	 */
 	constructor(element, subject) {
 		super();
@@ -305,6 +305,7 @@ function getControlEventHandler() {
 		if (element === undefined) {
 			return;
 		}
+
 		queueMicrotask(() => {
 			retrieveAndSetValue.call(this, element);
 		});
@@ -850,11 +851,7 @@ function handleInputControlAttributeUpdate(element, name, value) {
 		switch (element.type) {
 			case "select-multiple":
 				for (const [index, opt] of Object.entries(element.options)) {
-					if (value.indexOf(opt.value) !== -1) {
-						opt.selected = true;
-					} else {
-						opt.selected = false;
-					}
+					opt.selected = value.indexOf(opt.value) !== -1;
 				}
 
 				break;

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

@@ -1,7 +1,7 @@
-import { getGlobal } from "../../../../source/types/global.mjs";
+import {getGlobal} from "../../../../source/types/global.mjs";
 import * as chai from 'chai';
-import { chaiDom } from "../../../util/chai-dom.mjs";
-import { initJSDOM } from "../../../util/jsdom.mjs";
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
 
 let expect = chai.expect;
 chai.use(chaiDom);
@@ -91,21 +91,24 @@ describe('ToggleSwitch', function () {
         it('toggle to on', function () {
 
             const toggleSwitch = document.createElement('monster-toggle-switch');
-            toggleSwitch.setOption('actions.on', 'true');
-            toggleSwitch.setOption('actions.off', 'false');
+            toggleSwitch.setOption('values.on', 'true');
+            toggleSwitch.setOption('values.off', 'false');
 
-            expect(toggleSwitch.value).is.equal('off');
-            expect(toggleSwitch.state).is.equal('off');
+            toggleSwitch.value = "true";
+
+            expect("true").is.equal(toggleSwitch.value);
+            expect("on").is.equal(toggleSwitch.state);
 
             toggleSwitch.toggle();
 
-            expect(toggleSwitch.value).is.equal('on');
-            expect(toggleSwitch.state).is.equal('on');
+            expect("false").is.equal(toggleSwitch.value);
+            expect("off").is.equal(toggleSwitch.state);
 
             toggleSwitch.toggle();
 
-            expect(toggleSwitch.value).is.equal('off');
-            expect(toggleSwitch.state).is.equal('off');
+            expect("true").is.equal(toggleSwitch.value);
+            expect("on").is.equal(toggleSwitch.state);
+
         });
 
         it('toggle on to off', function () {
@@ -156,37 +159,46 @@ describe('ToggleSwitch', function () {
              */
             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;    
+                window.requestAnimationFrame(() => {
+
+                    /**
+                     * 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";
 
+                    window.requestAnimationFrame(() => {
+                        /**
+                         * 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();
+                    });
+
+                });
 
-                done();
             }, 0);
 
         })
@@ -212,16 +224,18 @@ describe('ToggleSwitch', function () {
              * new Control
              */
             let toggleSwitch = document.createElement('monster-toggle-switch');
+            window.requestAnimationFrame(() => {
 
-            /**
-             * the switch is off and provides the value for off
-             */
-            expect(toggleSwitch.value).is.equal('off');
+                /**
+                 * the switch is off and provides the value for off
+                 */
+                expect(null).is.equal(toggleSwitch.value);
 
-            /**
-             * the switch is off
-             */
-            expect(toggleSwitch.state).is.equal('off');
+                /**
+                 * the switch is off
+                 */
+                expect(toggleSwitch.state).is.equal('off');
+            });
 
         });
 
@@ -240,31 +254,33 @@ describe('ToggleSwitch', function () {
              */
             toggleSwitch.value = "test";
 
-            /**
-             * the switch is off and provides the value for off
-             */
-            expect(toggleSwitch.value).is.equal('false');
+            window.requestAnimationFrame(() => {
 
-            /**
-             * the switch is off
-             */
-            expect(toggleSwitch.state).is.equal('off');
+                /**
+                 * the switch is off and provides the value for off
+                 */
+                expect(null).is.equal(toggleSwitch.value);
 
-            /**
-            * disabled attribute is only set when the element has been mounted in the DOM
-            */
-            expect(toggleSwitch.hasAttribute('disabled')).is.false;
+                /**
+                 * the switch is off
+                 */
+                expect(toggleSwitch.state).is.equal('off');
 
-            /**
-             * insert DOM
-             */
-            document.getElementById('mocks').appendChild(toggleSwitch);
+                /**
+                 * disabled attribute is only set when the element has been mounted in the DOM
+                 */
+                expect(toggleSwitch.hasAttribute('disabled')).is.false;
 
-            /**
-            * now the element is disabled
-            */
-            expect(toggleSwitch.hasAttribute('disabled')).is.true;
+                /**
+                 * insert DOM
+                 */
+                document.getElementById('mocks').appendChild(toggleSwitch);
 
+                /**
+                 * now the element is disabled
+                 */
+                expect(toggleSwitch.hasAttribute('disabled')).is.false;
+            });
 
         });
 
@@ -294,8 +310,8 @@ describe('ToggleSwitch', function () {
             expect(toggleSwitch.state).is.equal('on');
 
             /**
-            * insert DOM
-            */
+             * insert DOM
+             */
             document.getElementById('mocks').appendChild(toggleSwitch);
 
             /**
@@ -308,5 +324,4 @@ describe('ToggleSwitch', function () {
     });
 
 
-
 });