diff --git a/source/components/layout/details.mjs b/source/components/layout/details.mjs index 1c96fdcefbbeff6c24515763d3c6823ca01c14c8..40e8431464c1882b1795355787d925dc5cae4b1b 100644 --- a/source/components/layout/details.mjs +++ b/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 === "") {