@schukai/monster 4.101.0 → 4.103.1

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

@@ -0,0 +1,117 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * 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 Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { ContextBase } from "./context-base.mjs";
+
+export { ContextInfo };
+
+/**
+ * A context info control.
+ *
+ * @fragments /fragments/components/form/context-info
+ *
+ * @since 3.55.0
+ * @copyright Volker Schukai
+ * @summary A context info control
+ */
+class ContextInfo extends ContextBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/context-info@@instance",
+		);
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates - The templates for the control.
+	 * @property {string} templates.main - The main template.
+	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
+	 * @property {string} content - The content of the popper.
+	 * @property {object} popper - The popper options.
+	 * @property {string} popper.placement - The placement of the popper.
+	 * @property {Object} classes - Custom CSS classes.
+	 * @property {string} classes.button - CSS class for the button element.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "auto",
+			classes: {
+				button: "monster-theme-primary-2",
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-context-info";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ContextHelpStyleSheet, ThemeStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+
+            <div data-monster-role="button"
+                 data-monster-attributes="class path:classes.button"
+                 part="button"><svg class="hidden"
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.2em"
+				height="1.2em"
+				fill="currentColor"
+				viewBox="0 0 16 16">
+				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+				<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+            </svg></div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex">
+                    <slot></slot>
+                </div>
+            </div>
+
+        </div>
+    `;
+}
+
+registerCustomElement(ContextInfo);

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

@@ -0,0 +1,117 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * 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 Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { ContextBase } from "./context-base.mjs";
+
+export { ContextNote };
+
+/**
+ * A context note control.
+ *
+ * @fragments /fragments/components/form/context-note
+ *
+ * @since 3.55.0
+ * @copyright Volker Schukai
+ * @summary A context note control
+ */
+class ContextNote extends ContextBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/context-note@@instance",
+		);
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates - The templates for the control.
+	 * @property {string} templates.main - The main template.
+	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
+	 * @property {string} content - The content of the popper.
+	 * @property {object} popper - The popper options.
+	 * @property {string} popper.placement - The placement of the popper.
+	 * @property {Object} classes - Custom CSS classes.
+	 * @property {string} classes.button - CSS class for the button element.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "auto",
+			classes: {
+				button: "monster-theme-secondary-2",
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-context-note";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ContextHelpStyleSheet, ThemeStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+
+            <div data-monster-role="button"
+                 data-monster-attributes="class path:classes.button"
+                 part="button"><svg class="hidden"
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.2em"
+				height="1.2em"
+				fill="currentColor"
+				viewBox="0 0 16 16">
+				<path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/>
+				<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
+            </svg></div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex">
+                    <slot></slot>
+                </div>
+            </div>
+
+        </div>
+    `;
+}
+
+registerCustomElement(ContextNote);

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

@@ -0,0 +1,117 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * 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 Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { ContextBase } from "./context-base.mjs";
+
+export { ContextSuccess };
+
+/**
+ * A context success control.
+ *
+ * @fragments /fragments/components/form/context-success
+ *
+ * @since 3.55.0
+ * @copyright Volker Schukai
+ * @summary A context success control
+ */
+class ContextSuccess extends ContextBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/context-success@@instance",
+		);
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates - The templates for the control.
+	 * @property {string} templates.main - The main template.
+	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
+	 * @property {string} content - The content of the popper.
+	 * @property {object} popper - The popper options.
+	 * @property {string} popper.placement - The placement of the popper.
+	 * @property {Object} classes - Custom CSS classes.
+	 * @property {string} classes.button - CSS class for the button element.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "auto",
+			classes: {
+				button: "monster-theme-success-2",
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-context-success";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ContextHelpStyleSheet, ThemeStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+
+            <div data-monster-role="button"
+                 data-monster-attributes="class path:classes.button"
+                 part="button"><svg class="hidden"
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.2em"
+				height="1.2em"
+				fill="currentColor"
+				viewBox="0 0 16 16">
+				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+				<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
+            </svg></div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex">
+                    <slot></slot>
+                </div>
+            </div>
+
+        </div>
+    `;
+}
+
+registerCustomElement(ContextSuccess);

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

@@ -0,0 +1,117 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * 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 Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { ContextBase } from "./context-base.mjs";
+
+export { ContextWarning };
+
+/**
+ * A context warning control.
+ *
+ * @fragments /fragments/components/form/context-warning
+ *
+ * @since 3.55.0
+ * @copyright Volker Schukai
+ * @summary A context warning control
+ */
+class ContextWarning extends ContextBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/context-warning@@instance",
+		);
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates - The templates for the control.
+	 * @property {string} templates.main - The main template.
+	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
+	 * @property {string} content - The content of the popper.
+	 * @property {object} popper - The popper options.
+	 * @property {string} popper.placement - The placement of the popper.
+	 * @property {Object} classes - Custom CSS classes.
+	 * @property {string} classes.button - CSS class for the button element.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "auto",
+			classes: {
+				button: "monster-theme-warning-2",
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-context-warning";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ContextHelpStyleSheet, ThemeStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+
+            <div data-monster-role="button"
+                 data-monster-attributes="class path:classes.button"
+                 part="button"><svg class="hidden"
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.2em"
+				height="1.2em"
+				fill="currentColor"
+				viewBox="0 0 16 16">
+				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+				<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
+            </svg></div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex">
+                    <slot></slot>
+                </div>
+            </div>
+
+        </div>
+    `;
+}
+
+registerCustomElement(ContextWarning);