diff --git a/source/components/form/action-button.mjs b/source/components/form/action-button.mjs index 8c44c1e46cb09528947931a0a748068670afea23..25f2f496ee4403ee13a54004d482c08e50fae939 100644 --- a/source/components/form/action-button.mjs +++ b/source/components/form/action-button.mjs @@ -69,11 +69,24 @@ const containerElementSymbol = Symbol("containerElement"); * PopperButton <|-- ActionButton * @enduml * - * @since 3.32.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A popper button */ + + + +/** + * A action button control. + * + * @fragments /fragments/components/form/select/ + * + * @example /examples/components/form/select-simple + * + * @since 3.32.0 + * @copyright schukai GmbH + * @summary A ActionButton control + */ class ActionButton extends PopperButton { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/api-button.mjs b/source/components/form/api-button.mjs index db4e131ff9175a4fce62ba5ad4fe9dda97bdb207..a54f9be8e956f34af516c4dabaf79ca9246d2a3f 100644 --- a/source/components/form/api-button.mjs +++ b/source/components/form/api-button.mjs @@ -78,14 +78,27 @@ const containerElementSymbol = Symbol("containerElement"); * ActionButton <|-- ApiButton * @enduml * - * @since 3.32.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A button that opens a popper element with possible actions. - * @fires Monster.Components.Form.event:monster-button-set - * @fires Monster.Components.Form.event:monster-api-button-click - * @fires Monster.Components.Form.event:monster-api-button-successful - * @fires Monster.Components.Form.event:monster-api-button-failed + */ + + + +/** + * An API button with icons + * + * @fragments /fragments/components/form/api-button/ + * + * @example /examples/components/form/api-button-simple + * + * @since 3.32.0 + * @copyright schukai GmbH + * @summary A api button control + * @fires monster-button-set + * @fires monster-api-button-click + * @fires monster-api-button-successful + * @fires monster-api-button-failed */ class ApiButton extends ActionButton { /** diff --git a/source/components/form/button-bar.mjs b/source/components/form/button-bar.mjs index 6efde9d502343e4653faaad88b7141bf31abb466..9a8b5fb3171d31a38f9647a6ca0be8edc974287f 100644 --- a/source/components/form/button-bar.mjs +++ b/source/components/form/button-bar.mjs @@ -152,12 +152,25 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position"; * CustomElement <|-- ButtonBar * @enduml * - * @since 3.19.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A configurable tab control * @fires Monster.Components.event:monster-fetched */ + + +/** + * A button bar control. + * + * @fragments /fragments/components/form/button-bar/ + * + * @example /examples/components/form/button-bar-simple + * + * @since 3.19.0 + * @copyright schukai GmbH + * @summary A button bar control + * @fires monster-fetched + */ class ButtonBar extends CustomElement { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/button.mjs b/source/components/form/button.mjs index c7626242bd05d0df7806a0c9e87d2900ca9fb64f..66c18e3a24044dc6fe8f8f18b6b797ebcf0f282e 100644 --- a/source/components/form/button.mjs +++ b/source/components/form/button.mjs @@ -9,7 +9,7 @@ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms. * For more information about purchasing a commercial license, please contact schukai GmbH. * - * SPDX-License-Identifier: AGPL-3.0 + * SPDX-License-Identifier: AGPL-3.0 */ import { instanceSymbol } from "../../constants.mjs"; diff --git a/source/components/form/confirm-button.mjs b/source/components/form/confirm-button.mjs index 22be74f17e02d02f9e2fbd0ee831525f33b1b3c0..d9bcf2a1e474636ae17c3ae460bb4e575075ccac 100644 --- a/source/components/form/confirm-button.mjs +++ b/source/components/form/confirm-button.mjs @@ -85,11 +85,23 @@ const cancelButtonElementSymbol = Symbol("cancelButtonElement"); * PopperButton <|-- ConfirmButton * @enduml * - * @since 1.5.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A confirm button */ + + +/** + * A confirm button control. + * + * @fragments /fragments/components/form/confirm-button/ + * + * @example /examples/components/form/confirm-button-simple + * + * @since 1.5.0 + * @copyright schukai GmbH + * @summary A confirm button control + */ class ConfirmButton extends PopperButton { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/context-error.mjs b/source/components/form/context-error.mjs index 1c3a12e44c0fee9d66fe1905170433447ad1a0a4..511eda339dd168068720e3ab858a06927098eda1 100644 --- a/source/components/form/context-error.mjs +++ b/source/components/form/context-error.mjs @@ -60,11 +60,23 @@ const iconElementSymbol = Symbol("iconElement"); * * @example /examples/components/form/context-error-simple * - * @since 3.55.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A control that can be used to display a tooltip or a popover with an error message. **/ + + +/** + * A context error control. + * + * @fragments /fragments/components/form/select/ + * + * @example /examples/components/form/select-simple + * + * @since 3.55.0 + * @copyright schukai GmbH + * @summary A context error control + */ class ContextError extends Popper { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/context-help.mjs b/source/components/form/context-help.mjs index 82479607b38d2a89484e7a9c300a6aa8e5f56a44..d2a684720291d7d4cc0adbf8305d938b94b6c66f 100644 --- a/source/components/form/context-help.mjs +++ b/source/components/form/context-help.mjs @@ -51,11 +51,23 @@ export { ContextHelp }; * Popper <|-- ContextHelp * @enduml * - * @since 3.29.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A control that can be used to display a tooltip or a popover. */ + + +/** + * A context help control. + * + * @fragments /fragments/components/form/context-help/ + * + * @example /examples/components/form/context-help-simple + * + * @since 3.29.0 + * @copyright schukai GmbH + * @summary A context help control + */ class ContextHelp extends Popper { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/field-set.mjs b/source/components/form/field-set.mjs index ec1e31cd6f98975243cc23bbbf38031418e38ea5..da678c6e95b524938ba82c22998cfc4b2d9a7a63 100644 --- a/source/components/form/field-set.mjs +++ b/source/components/form/field-set.mjs @@ -95,11 +95,23 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement"); * CustomControl <|-- FieldSet * @enduml * - * @since 3.65.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A simple FieldSet */ + + +/** + * A field set control that can be used to group form elements. + * + * @fragments /fragments/components/form/field-set/ + * + * @example /examples/components/form/field-set-simple + * + * @since 3.65.0 + * @copyright schukai GmbH + * @summary A field set control + */ class FieldSet extends CustomControl { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/form.mjs b/source/components/form/form.mjs index 7db717f06abf5efa474c612516f4ec0308fc29f1..b39e477b8bc83907b1d378e495dfcefebca1894d 100644 --- a/source/components/form/form.mjs +++ b/source/components/form/form.mjs @@ -37,6 +37,22 @@ const debounceWriteBackSymbol = Symbol("debounceWriteBack"); */ const debounceBindSymbol = Symbol("debounceBind"); + +/** + * A form control that can be used to group form elements. + * + * @fragments /fragments/components/form/form/ + * + * @example /examples/components/form/form-simple + * + * @since 1.0.0 + * @copyright schukai GmbH + * @summary A form control + * @fires monster-options-set + * @fires monster-selected + * @fires monster-change + * @fires monster-changed + */ class Form extends DataSet { /** * diff --git a/source/components/form/message-state-button.mjs b/source/components/form/message-state-button.mjs index b1f4570a370b213dcdb0cd16ee0407fe1ca6c963..1e886a3a15da91636950219da2e76fcdf73d116d 100644 --- a/source/components/form/message-state-button.mjs +++ b/source/components/form/message-state-button.mjs @@ -64,11 +64,27 @@ const buttonElementSymbol = Symbol("buttonElement"); * Popper <|-- MessageStateButton * @enduml * - * @since 2.11.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A state button with icons and a message */ + + +/** + * A select control that can be used to select one or more options from a list. + * + * @fragments /fragments/components/form/message-state-button/ + * + * @example /examples/components/form/message-state-button-simple + * + * @since 2.11.0 + * @copyright schukai GmbH + * @summary A beautiful select control that can make your life easier and also looks good. + * @fires monster-options-set + * @fires monster-selected + * @fires monster-change + * @fires monster-changed + */ class MessageStateButton extends Popper { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/popper-button.mjs b/source/components/form/popper-button.mjs index 43964fb6b10aa8e04935881e30140829a0d73d3d..d2aa36675edb12c7ee33a94768a709890745eaaf 100644 --- a/source/components/form/popper-button.mjs +++ b/source/components/form/popper-button.mjs @@ -121,11 +121,27 @@ const arrowElementSymbol = Symbol("arrowElement"); * Popper <|-- PopperButton * @enduml * - * @since 1.5.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A popper button */ + + +/** + * A beautiful popper button that can make your life easier and also looks good. + * + * @fragments /fragments/components/form/popper-button/ + * + * @example /examples/components/form/popper-button-simple + * + * @since 1.5.0 + * @copyright schukai GmbH + * @summary A beautiful popper button + * @fires monster-options-set + * @fires monster-selected + * @fires monster-change + * @fires monster-changed + */ class PopperButton extends Popper { /** * This method is called by the `instanceof` operator. diff --git a/source/components/form/reload.mjs b/source/components/form/reload.mjs index 3d27a63ad455cf6909b5da4a5f73c5af1249018d..f135d0b6c6f7491e2bc35efefca9035ea957605c 100644 --- a/source/components/form/reload.mjs +++ b/source/components/form/reload.mjs @@ -99,11 +99,23 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized"); * CustomControl <|-- Reload * @enduml * - * @since 1.13.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A reload control - * @fires Monster.Components.event:monster-fetched + * @fires Monster.Components.event:m + */ + +/** + * A reload control. + * + * @fragments /fragments/components/form/reload/ + * + * @example /examples/components/form/reload-simple + * + * @since 1.13.0 + * @copyright schukai GmbH + * @summary A beautiful reload control + * @fires onster-fetched */ class Reload extends CustomElement { /** diff --git a/source/components/form/shadow-reload.mjs b/source/components/form/shadow-reload.mjs index 28de5fa2838cc0fff7fdf38d939b76f91db0fefe..8ff3553dba05449b1f72318f3b12718190946430 100644 --- a/source/components/form/shadow-reload.mjs +++ b/source/components/form/shadow-reload.mjs @@ -19,73 +19,16 @@ import { Reload } from "./reload.mjs"; export { ShadowReload }; /** - * This CustomControl reloads the content of a url and embeds it into the dom. + * A select control that can be used to select one or more options from a list. * - * <img src="./images/shadowreload.png"> + * @fragments /fragments/components/form/shadow-reload/ * - * You can create this control either by specifying the HTML tag `<monster-shadow-reload />` directly in the HTML or using - * Javascript via the `document.createElement('monster-shadow-reload');` method. - * - * ```html - * <monster-shadow-reload></monster-shadow-reload> - * - * <script type="module"> - * import {Reload} from '@schukai/component-form/source/shadow-reload.js'; - * document.createElement('monster-shadow-reload'); - * </script> - * ``` - * - * A simple configuration can look like this - * - * ```html - * <script id="config" - * type="application/json"> - * { - * "url": "./content.html", - * } - * </script> - * - * <monster-reload data-monster-options-selector="#config"> - * </monster-reload> - * ``` - * - * If you want to display a loader, you can insert a div with the attribute `data-monster-role="container"`. - * The content of this div will be replaced by the loaded code. - * - * ```html - * <monster-reload data-monster-options-selector="#config"> - * <div data-monster-role="container"> - * LOADER ... - * </div> - * </monster-reload> - * ``` - * - * If you need additional structure, you can simply specify it. - * - * ```html - * <monster-shadow-reload data-monster-options-selector="#config"> - * <div class="row"> - * <div class="col" data-monster-role="container"> - * LOADER ... - * </div> - * </div> - * </monster-shadow-reload> - * ``` - * - * @startuml shadowreload.png - * skinparam monochrome true - * skinparam shadowing false - * HTMLElement <|-- CustomElement - * CustomElement <|-- CustomControl - * CustomControl <|-- Reload - * Reload <|-- ShadowReload - * @enduml + * @example /examples/components/form/shadow-reload-simple * * @since 3.6.0 * @copyright schukai GmbH - * @memberOf Monster.Components.Form - * @summary A shadow reload control - * @fires Monster.Components.event:monster-fetched + * @summary A shadow reload control. + * @fires monster-fetched */ class ShadowReload extends Reload { /** diff --git a/source/components/form/state-button.mjs b/source/components/form/state-button.mjs index ef265b7d1512400dca934c370bb9c5ea41208834..8dc1e0503d10e1f7aa06d05074eea89a2cf3d70e 100644 --- a/source/components/form/state-button.mjs +++ b/source/components/form/state-button.mjs @@ -23,41 +23,15 @@ import { getStateInstanceFor, State } from "./types/state.mjs"; export { StateButton }; /** - * This CustomControl creates a button element with a variety of options. + * A state button with icons * - * <img src="./images/state-button.png"> + * @fragments /fragments/components/form/state-button/ * - * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library - * - * You can create this control either by specifying the HTML tag <monster-state-button />` directly in the HTML or using - * Javascript via the `document.createElement('monster-state-button');` method. - * - * ```html - * <monster-state-button></monster-state-button> - * ``` - * - * Or you can create this CustomControl directly in Javascript: - * - * ```js - * import {StateButton} from '@schukai/component-form/source/state-button.js'; - * document.createElement('monster-state-button'); - * ``` - * - * The `data-monster-button-class` attribute can be used to change the CSS class of the button. - * - * @startuml state-button.png - * skinparam monochrome true - * skinparam shadowing false - * HTMLElement <|-- CustomElement - * CustomElement <|-- CustomControl - * CustomControl <|-- Button - * Button <|-- StateButton - * @enduml + * @example /examples/components/form/state-button-simple * * @since 1.5.0 * @copyright schukai GmbH - * @memberOf Monster.Components.Form - * @summary A state button with icons + * @summary A beautiful button with icons */ class StateButton extends Button { /** diff --git a/source/components/form/tabs.mjs b/source/components/form/tabs.mjs index 86dc832a7c64802a2b92d5e792a4a7555817e2f9..d92dfd9d8ff4d5e71b41ae26149ceb1546b70e63 100644 --- a/source/components/form/tabs.mjs +++ b/source/components/form/tabs.mjs @@ -16,44 +16,8 @@ import { Tabs as NewTabs } from "../layout/tabs.mjs"; export { Tabs }; /** - * This CustomControl creates a tab element with a variety of options. - * - * <img src="./images/tabs.png"> - * - * You can create this control either by specifying the HTML tag `<monster-tabs />` directly in the HTML or using - * Javascript via the `document.createElement('monster-tabs');` method. - * - * ```html - * <monster-tabs></monster-tabs> - * ``` - * - * Or you can create this CustomControl directly in Javascript: - * - * ```js - * import {Tabs} from '@schukai/component-form/source/tab.js'; - * document.createElement('monster-tabs'); - * ``` - * - * @example <caption>Create a simple tab control</caption> - * <monster-tabs> - * <div id="tab1">Tab 1</div> - * <div id="tab2">Tab 2</div> - * </monster-tabs> - * - * @startuml tabs.png - * skinparam monochrome true - * skinparam shadowing false - * HTMLElement <|-- CustomElement - * CustomElement <|-- CustomControl - * CustomControl <|-- NewTabs - * NewTabs <|-- Tabs - * @enduml - * * @since 1.10.0 * @copyright schukai GmbH - * @memberOf Monster.Components.Form - * @summary A configurable tab control - * @fires Monster.Components.event:monster-fetched - * @deprecated since 3.59.0 use {@link Monster.Components.Layout.Tabs} + * @deprecated since 3.59.0 use Layout/Tabs instead */ class Tabs extends NewTabs {} diff --git a/source/components/form/template.mjs b/source/components/form/template.mjs index 4463e288c2b5ab5b155d028af8c83641b5d5f3dc..3623c49bc2ed5a757b76b24c5abca7c3c97572a0 100644 --- a/source/components/form/template.mjs +++ b/source/components/form/template.mjs @@ -38,41 +38,16 @@ export { Template }; const intersectionObserverWasInitialized = Symbol("wasInitialized"); /** - * This CustomElement `monster-template` reloads a content and adds it to the ShadowRoot. - * The content is set to not visible, + * A Template control is a control that can be used to load content from a URL and display it in the ShadowRoot. * - * <img src="./images/template.png"> + * @fragments /fragments/components/form/template/ * - * You can create this control either by specifying the HTML tag `<monster-template />` directly in the HTML or using - * Javascript via the `document.createElement('monster-template');` method. - * - * ```html - * <monster-template></monster-template> - * ``` - * - * Or you can create this CustomControl directly in Javascript: - * - * ```js - * import {Template} from '@schukai/component-form/source/template.js'; - * document.createElement('monster-template'); - * ``` - * - * The content will not be loaded until this element is visible. If the element is invisible again and becomes visible again, - * the content is reloaded as well. you can disable this behavior by setting `reload=onshow`. * - * - * @startuml template.png - * skinparam monochrome true - * skinparam shadowing false - * HTMLElement <|-- CustomElement - * CustomElement <|-- CustomControl - * CustomControl <|-- Template - * @enduml + * @example /examples/components/form/template-simple * * @since 1.11.0 * @copyright schukai GmbH - * @memberOf Monster.Components.Form * @summary A template control - * @fires Monster.Components.event:monster-fetched + * @fires monster-fetched */ class Template extends CustomElement { /** diff --git a/source/components/form/toggle-switch.mjs b/source/components/form/toggle-switch.mjs index 2d6af8e13b6bfe054e12cef921da6a41ae12873f..7d90b0416097ba79c44c48906be0ced6791c24c6 100644 --- a/source/components/form/toggle-switch.mjs +++ b/source/components/form/toggle-switch.mjs @@ -63,11 +63,26 @@ export const STATE_OFF = "off"; * CustomControl <|-- ToggleSwitch * @enduml * - * @since 3.57.0 * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A simple toggle switch */ + +/** + * A simple toggle switch + * + * @fragments /fragments/components/form/toggle-switch + * + * @example /examples/components/form/toggle-switch-simple + * + * @since 3.57.0 + * @copyright schukai GmbH + * @summary A beautiful switch element + * @fires monster-options-set + * @fires monster-selected + * @fires monster-change + * @fires monster-changed + */ class ToggleSwitch extends CustomControl { /** * To set the options via the html tag the attribute `data-monster-options` must be used. diff --git a/source/components/form/tree-select.mjs b/source/components/form/tree-select.mjs index e09db03270322e941657f42460edbb557c6c74bc..290eee3b8a416b5da439030ec02389d2ac4cb836 100644 --- a/source/components/form/tree-select.mjs +++ b/source/components/form/tree-select.mjs @@ -53,47 +53,19 @@ const internalNodesSymbol = Symbol("internalNodes"); const keyEventHandler = Symbol("keyEventHandler"); /** - * This CustomControl creates a select element with a variety of options. - * It supports filtering, local and remote, multiple selection and has a - * template system for displaying the options. + * A tree select control is a select control that can be used to select a value from a tree structure. * - * <img src="./images/treeselect.png"> + * @fragments /fragments/components/form/tree-select * - * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library - * as well as [pooperjs](https://popper.js.org/docs/v2/). - * - * You can create this control either by specifying the HTML tag `<monster-select />` directly in the HTML or using - * Javascript via the `document.createElement('monster-select');` method. - * - * ```html - * <monster-select></monster-select> - * ``` - * - * Or you can create this CustomControl directly in Javascript: - * - * ```js - * import {TreeSelect} from '@schukai/component-form/source/treeselect.js'; - * document.createElement('monster-tree-select'); - * ``` - * - * @externalExample ../../../example/components/form/tree-select.mjs - * @startuml treeselect.png - * skinparam monochrome true - * skinparam shadowing false - * HTMLElement <|-- CustomElement - * CustomElement <|-- CustomControl - * CustomControl <|-- Select - * Select <|-- TreeSelect - * @enduml + * @example /examples/components/form/tree-select * * @since 1.9.0 * @copyright schukai GmbH - * @memberOf Monster.Components.Form - * @summary A highly configurable select control - * @fires Monster.Components.Form.event:monster-options-set - * @fires Monster.Components.Form.event:monster-selected - * @fires Monster.Components.Form.event:monster-change - * @fires Monster.Components.Form.event:monster-changed + * @summary A beautiful tree select control with a lot of options + * @fires monster-options-set + * @fires monster-selected + * @fires monster-change + * @fires monster-changed */ class TreeSelect extends Select { /** diff --git a/source/text/generate-range-comparison-expression.mjs b/source/text/generate-range-comparison-expression.mjs index 25d976c0943d978f1ef1947fc7ee11535be80a7a..ea9a197ccbc5ddb324d1477af2cc90a8cb1ce101 100644 --- a/source/text/generate-range-comparison-expression.mjs +++ b/source/text/generate-range-comparison-expression.mjs @@ -25,7 +25,7 @@ export { generateRangeComparisonExpression }; * The generateRangeComparisonExpression() function returns a string representation of the comparison expression. * * ## Options - * The options parameter is an object that can have the following properties: + * The option parameter is an object that can have the following properties: * * urlEncode (boolean, default: false): if set to true, URL encodes the comparison operators. * andOp (string, default: '&&'): the logical AND operator to use in the expression. diff --git a/source/types/base.mjs b/source/types/base.mjs index e31ffff332cfd80a1b82892d0ec691cd07cae19c..c05a8ea50be147cda4fff1564e13a0c57beff3a6 100644 --- a/source/types/base.mjs +++ b/source/types/base.mjs @@ -22,7 +22,7 @@ export { Base }; * This class has besides a `toString` which returns the json representation of the object * also a functionality to check if an object is an instance of a class. * - * Therefor the class has a static method ` [Symbol.hasInstance](that)` which returns true if the object + * Therefore, the class has a static method ` [Symbol.hasInstance](that)` which returns true if the object * is an instance of the class. * * @see [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance](developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance) diff --git a/source/types/id.mjs b/source/types/id.mjs index 0506f77322ab7beeb637410035884e91329abe6f..dd277d741455e6b5e633afc5bd74932a8dd5c2fa 100644 --- a/source/types/id.mjs +++ b/source/types/id.mjs @@ -28,7 +28,7 @@ const internalCounter = new Map(); * thus, the first id with the prefix `myid` will be `myid1` and the second id `myid2`. * The ids are the same for every call, for example on a web page. * - * So the ids can also be used for navigation. you just have to take care that the order stays the same. + * So the ids can also be used for navigation. you have to take care that the order stays the same. * * As of version 1.6.0 there is the new RandomID. this ID class is continuous from now on. *