@schukai/monster 4.130.0 → 4.131.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.130.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.131.0"}

package/source/components/form/action-button.mjs

@@ -46,7 +46,8 @@ const containerElementSymbol = Symbol("containerElement");
  *
  * @fragments /fragments/components/form/action-button
  *
- * @example /examples/components/form/action-button
+ * @example /examples/components/form/action-button Inline menu
+ * @example /examples/components/form/action-button-bulk-actions Bulk action menu
  *
  * @issue https://localhost.alvine.dev:8440/development/issues/closed/264.html
  *

package/source/components/form/context-hint.mjs

@@ -24,6 +24,8 @@ export { ContextHint };
  * A context hint control.
  *
  * @fragments /fragments/components/form/context-hint
+ * @example /examples/components/form/context-hint-inline
+ * @example /examples/components/form/context-hint-shortcuts
  *
  * @since 3.55.0
  * @copyright Volker Schukai

package/source/components/form/context-info.mjs

@@ -24,6 +24,8 @@ export { ContextInfo };
  * A context info control.
  *
  * @fragments /fragments/components/form/context-info
+ * @example /examples/components/form/context-info-workspace
+ * @example /examples/components/form/context-info-retention
  *
  * @since 3.55.0
  * @copyright Volker Schukai

package/source/components/form/context-note.mjs

@@ -24,6 +24,8 @@ export { ContextNote };
  * A context note control.
  *
  * @fragments /fragments/components/form/context-note
+ * @example /examples/components/form/context-note-handover
+ * @example /examples/components/form/context-note-review
  *
  * @since 3.55.0
  * @copyright Volker Schukai

package/source/components/form/context-success.mjs

@@ -24,6 +24,8 @@ export { ContextSuccess };
  * A context success control.
  *
  * @fragments /fragments/components/form/context-success
+ * @example /examples/components/form/context-success-domain
+ * @example /examples/components/form/context-success-checklist
  *
  * @since 3.55.0
  * @copyright Volker Schukai

package/source/components/form/context-warning.mjs

@@ -24,6 +24,8 @@ export { ContextWarning };
  * A context warning control.
  *
  * @fragments /fragments/components/form/context-warning
+ * @example /examples/components/form/context-warning-retention
+ * @example /examples/components/form/context-warning-delete
  *
  * @since 3.55.0
  * @copyright Volker Schukai

package/source/components/form/message-state-button.mjs

@@ -51,7 +51,8 @@ const MESSAGE_LAYOUT_WIDE = "wide";
  * or manual actions.
  *
  * @fragments /fragments/components/form/message-state-button/
- * @example /examples/components/form/message-state-button-simple
+ * @example /examples/components/form/message-state-button-simple Success message
+ * @example /examples/components/form/message-state-button-retry Retry and error message
  *
  * @since 2.11.0
  * @copyright Volker Schukai

package/source/components/form/state-button.mjs

@@ -27,7 +27,8 @@ export { StateButton };
  *
  * @fragments /fragments/components/form/state-button/
  *
- * @example /examples/components/form/state-button-simple
+ * @example /examples/components/form/state-button-simple Simple state cycle
+ * @example /examples/components/form/state-button-deployment Deployment state sequence
  *
  * @since 1.5.0
  * @copyright Volker Schukai

package/source/components/layout/board.mjs

@@ -47,6 +47,7 @@ export const parkingElementSymbol = Symbol("parkingElement");
  * @fragments /fragments/components/layout/board/
  *
  * @example /examples/components/layout/board-simple
+ * @example /examples/components/layout/board-kanban Kanban Board
  *
  * @since 3.116.0
  * @copyright Volker Schukai

package/source/components/layout/collapse.mjs

@@ -98,6 +98,7 @@ const nameSymbol = Symbol("name");
  * @fragments /fragments/components/layout/collapse/
  *
  * @example /examples/components/layout/collapse-simple
+ * @example /examples/components/layout/collapse-with-events Collapse With Events
  *
  * @since 3.74.0
  * @copyright Volker Schukai

package/source/components/layout/full-screen.mjs

@@ -53,6 +53,7 @@ export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement");
  * @fragments /fragments/components/layout/full-screen/
  *
  * @example /examples/components/layout/full-screen-simple
+ * @example /examples/components/layout/full-screen-media Focus Media View
  *
  * @since 4.10.0
  * @copyright Volker Schukai

package/source/components/layout/iframe.mjs

@@ -56,6 +56,7 @@ const timerCallbackSymbol = Symbol("timerCallback");
  * @fragments /fragments/components/layout/iframe/
  *
  * @example /examples/components/layout/iframe-simple Simple iframe
+ * @example /examples/components/layout/iframe-with-toolbar Iframe With Toolbar
  *
  * @since 3.76.0
  * @copyright Volker Schukai

package/source/components/layout/overlay.mjs

@@ -70,6 +70,7 @@ const ATTRIBUTE_VALUE_OVERLAY_OPEN = "overlay-open";
  * @fragments /fragments/components/layout/overlay/
  *
  * @example /examples/components/layout/overlay-simple
+ * @example /examples/components/layout/overlay-programmatic Programmatic Overlay Control
  *
  * @copyright Volker Schukai
  * @summary The Overlay component is used to show an overlay and a button to open the overlay.

package/source/components/layout/panel.mjs

@@ -49,6 +49,7 @@ const timerCallbackSymbol = Symbol("timerCallback");
  * @fragments /fragments/components/layout/panel/
  *
  * @example /examples/components/layout/panel-simple
+ * @example /examples/components/layout/panel-command-center Command Center Panel
  *
  * @since 3.54.0
  * @copyright Volker Schukai

package/source/components/layout/split-panel.mjs

@@ -73,6 +73,7 @@ const TYPE_HORIZONTAL = "horizontal";
  * @issue https://localhost.alvine.dev:8440/development/issues/closed/184.html
  *
  * @example /examples/components/layout/split-panel-simple
+ * @example /examples/components/layout/split-panel-presets Split Panel Presets
  *
  * @since 3.54.0
  * @copyright Volker Schukai

package/source/components/layout/tabs.mjs

@@ -216,7 +216,7 @@ class Tabs extends CustomElement {
 			features: {
 				openDelay: null,
 				removeBehavior: "auto",
-				openFirst: false,
+				openFirst: true,
 			},
 
 			classes: {

package/source/components/layout/vertical-tabs.mjs

@@ -217,7 +217,7 @@ class VerticalTabs extends CustomElement {
 			features: {
 				openDelay: null,
 				removeBehavior: "auto",
-				openFirst: false,
+				openFirst: true,
 			},
 
 			classes: {

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

@@ -60,6 +60,7 @@ const MODE_WIDE = "wide";
  * @fragments /fragments/components/layout/width-toggle/
  *
  * @example /examples/components/layout/width-toggle-simple Toggle Width
+ * @example /examples/components/layout/width-toggle-reader Reader Width Toggle
  *
  * @since 3.57.0
  * @copyright Volker Schukai

package/test/cases/components/layout/tabs.mjs

@@ -28,6 +28,21 @@ let html1 = `
     </monster-tabs>
 `;
 
+// language=html
+let htmlActiveSecond = `
+    <monster-tabs id="mytabs">
+        <div data-monster-button-label="TAB1">
+            Das ist tab 1
+        </div>
+        <div data-monster-button-label="TAB2" class="active">
+            Das ist tab 2
+        </div>
+        <div data-monster-button-label="TAB3">
+            Das ist tab 3
+        </div>
+    </monster-tabs>
+`;
+
 let Tabs;
 
 describe('Tabs', function () {
@@ -122,6 +137,50 @@ describe('Tabs', function () {
             }, 0);
         });
 
+		it('should open the first tab by default when no tab is predefined as active', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const tabs = document.getElementById('mytabs');
+					expect(tabs).is.instanceof(Tabs);
+
+					setTimeout(() => {
+						expect(tabs.children[0].classList.contains('active')).to.equal(true);
+						expect(tabs.children[1].classList.contains('active')).to.equal(false);
+						expect(tabs.getActiveTab()).to.equal(tabs.children[0].getAttribute('id'));
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
+                }
+            }, 0);
+        });
+
+		it('should keep a predefined active tab instead of opening the first tab', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = htmlActiveSecond;
+
+			setTimeout(() => {
+				try {
+					const tabs = document.getElementById('mytabs');
+					expect(tabs).is.instanceof(Tabs);
+
+					setTimeout(() => {
+						expect(tabs.children[0].classList.contains('active')).to.equal(false);
+						expect(tabs.children[1].classList.contains('active')).to.equal(true);
+						expect(tabs.getActiveTab()).to.equal(tabs.children[1].getAttribute('id'));
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
+                }
+            }, 0);
+        });
+
     });