@schukai/monster 4.129.10 → 4.130.1

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.129.10"}
+{"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.1"}

package/source/components/content/image-editor.mjs

@@ -274,6 +274,7 @@ const rotateResetButtonElementSymbol = Symbol("rotateResetButtonElement");
  * An Image Editor Component
  *
  * @fragments /fragments/components/content/image-editor/
+ * @example /examples/components/content/image-editor-basic Basic editor workflow
  *
  * @since 4.68.0
  * @copyright Volker Schukai

package/source/components/datatable/change-button.mjs

@@ -187,7 +187,7 @@ function initControlReferences() {
 	const selector2 = this.getOption("overlay.selector");
 
 	if (isString(selector2)) {
-		const element = findElementWithSelectorUpwards(this, selector);
+		const element = findElementWithSelectorUpwards(this, selector2);
 		if (element === null) {
 			throw new Error("the selector must match exactly one element");
 		}

package/source/components/datatable/pagination.mjs

@@ -102,7 +102,8 @@ const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" heig
  *
  * @fragments /fragments/components/datatable/pagination
  *
- * @example /examples/components/datatable/pagination-simple Pagination
+ * @example /examples/components/datatable/pagination-simple Datasource pagination
+ * @example /examples/components/datatable/pagination-programmatic Programmatic pagination state
  *
  * @copyright Volker Schukai
  * @summary The Pagination component is used to show the current page and the total number of pages.

package/source/components/datatable/save-button.mjs

@@ -84,6 +84,7 @@ const internalDisableVersionSymbol = Symbol("internalDisableVersion");
  * @fragments /fragments/components/datatable/save-button
  *
  * @example /examples/components/datatable/save-button-simple Simple example
+ * @example /examples/components/datatable/save-button-workflow Draft changes workflow
  *
  * @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
  *

package/source/components/files/file-manager.mjs

@@ -137,6 +137,7 @@ const saveAllButtonSymbol = Symbol("saveAllButton");
  * A file manager for navigating and editing files.
  *
  * @fragments /fragments/components/files/file-manager/
+ * @example /examples/components/files/file-manager-basic Basic file manager workflow
  *
  * @since 4.44.0
  * @summary A file manager control that builds a tree navigation from an API and opens files in tabs.

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/api-button.mjs

@@ -57,10 +57,11 @@ const containerElementSymbol = Symbol("containerElement");
  * @fragments /fragments/components/form/api-button/
  *
  * @example /examples/components/form/api-button-simple API Button
+ * @example /examples/components/form/api-button-workflow API workflow with events
  *
  * @since 3.32.0
  * @copyright Volker Schukai
- * @summary A api button control
+ * @summary An API button that loads actions dynamically and executes follow-up requests
  * @fires monster-button-set
  * @fires monster-api-button-click
  * @fires monster-api-button-successful

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

@@ -60,6 +60,7 @@ const iconElementSymbol = Symbol("iconElement");
  * @fragments /fragments/components/form/context-error
  *
  * @example /examples/components/form/context-error-simple
+ * @example /examples/components/form/context-error-live-validation
  *
  * @since 3.55.0
  * @copyright Volker Schukai

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

@@ -25,6 +25,7 @@ export { ContextHelp };
  * @fragments /fragments/components/form/context-help
  *
  * @example /examples/components/form/context-help-simple
+ * @example /examples/components/form/context-help-inline-guidance
  *
  * @since 3.29.0
  * @copyright Volker Schukai

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/credential-button.mjs

@@ -53,6 +53,7 @@ const passwordWiredSymbol = Symbol("passwordWired");
  * @fragments /fragments/components/form/credential-button/
  *
  * @example /examples/components/form/credential-button-simple
+ * @example /examples/components/form/credential-button-retry
  *
  * @since 3.91.0
  * @copyright Volker Schukai

package/source/components/form/field-set.mjs

@@ -75,7 +75,8 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
  *
  * @fragments /fragments/components/form/field-set/
  *
- * @example /examples/components/form/field-set-simple
+ * @example /examples/components/form/field-set-simple Shipping field set
+ * @example /examples/components/form/field-set-preferences Compact settings field set
  *
  * @since 3.65.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/quantity.mjs

@@ -53,7 +53,8 @@ const holdIntervalSymbol = Symbol("holdInterval");
  *
  * @fragments /fragments/components/form/quantity/
  *
- * @example /examples/components/form/quantity-simple
+ * @example /examples/components/form/quantity-simple Basic quantity control
+ * @example /examples/components/form/quantity-decimal Decimal pricing stepper
  *
  * @since 4.41.0
  * @copyright Volker Schukai

package/source/components/form/repeat-field-set.mjs

@@ -70,6 +70,7 @@ const itemDefaultsSymbol = Symbol("itemDefaults");
  * A repeatable field-set control that manages array data.
  *
  * @fragments /fragments/components/form/repeat-field-set/
+ * @example /examples/components/form/repeat-field-set-simple Repeatable contacts
  *
  * @since 3.78.0
  * @summary A repeatable field-set control

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/form/toggle-switch.mjs

@@ -58,6 +58,7 @@ export const STATE_OFF = "off";
  * @fragments /fragments/components/form/toggle-switch
  *
  * @example /examples/components/form/toggle-switch-simple Simple example
+ * @example /examples/components/form/toggle-switch-custom-values Custom values and labels
  *
  * @since 3.57.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/notify/monitor-attribute-errors.mjs

@@ -47,7 +47,7 @@ const mutationObserversSymbol = Symbol("mutationObservers");
  *
  * @since 3.98.0
  * @copyright Volker Schukai
- * @summary A beautiful MonitorAttributeErrors that can make your life easier and also looks good.
+ * @summary Watches the DOM for `data-monster-error` attributes and can forward them to `monster-notify`.
  */
 class MonitorAttributeErrors extends CustomElement {
 	/**

package/source/components/state/log.mjs

@@ -58,6 +58,7 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @fragments /fragments/components/state/log
  *
  * @example /examples/components/state/log-simple Log
+ * @example /examples/components/state/log-live-feed Live deployment feed
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *

package/source/components/state/state.mjs

@@ -28,6 +28,7 @@ export { State };
  * @fragments /fragments/components/state/state
  *
  * @example /examples/components/state/state-simple State
+ * @example /examples/components/state/state-actionable Actionable empty state
  *
  * @since 1.5.0
  * @copyright Volker Schukai

package/source/components/state/thread.mjs

@@ -54,6 +54,7 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @fragments /fragments/components/state/thread
  *
  * @example /examples/components/state/thread-simple Thread
+ * @example /examples/components/state/thread-review Review thread with nested replies
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/open/374.html
  *

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);
+        });
+
     });