fix: change order and fix detail-label #245

source/components/layout/details.mjs

@@ -38,49 +38,15 @@ const buttonElementSymbol = Symbol("buttonElement");
 const buttonEventHandlerSymbol = Symbol("buttonEventHandler");
 
 /**
- * The Details component is used to show a details.
+ * A Details component
  *
- * <img src="./images/details.png">
+ * @fragments /fragments/components/layout/details/
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-details />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-details');` method.
- *
- * ```html
- * <monster-details></monster-details>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-state/source/details.mjs';
- * document.createElement('monster-details');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml details.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Collapse
- * Collapse <|-- Details
- * @enduml
+ * @example /examples/components/layout/details-simple
  *
+ * @since 3.74.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.Layout
- * @summary A simple details component
- * @fires Monster.Components.Layout.Details.event:monster-details-before-open
- * @fires Monster.Components.Layout.Details.event:monster-details-open
- * @fires Monster.Components.Layout.Details.event:monster-details-before-close
- * @fires Monster.Components.Layout.Details.event:monster-details-closed
+ * @summary A simple but cool Details component
  */
 class Details extends Collapse {
 	/**
@@ -215,13 +181,17 @@ function initButtonLabel() {
 	if (this.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
 		label = this.getAttribute(ATTRIBUTE_BUTTON_LABEL);
 	} else {
-		label = this.innerText;
+		label = this.getOption("labels.button", "Details");
 	}
 
 	if (!isString(label)) {
 		label = "";
 	}
 
+	if (label==="") {
+		label = this.innerText;
+	}
+
 	label = label.trim();
 
 	if (label === "") {