diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dbdbacd75f4192699c110dd9e9c9b0966047d70..8e8fd9b2a43ce17faa32cb544318309b6bbc03a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,37 +1,17 @@
# Changelog
-
-
## [3.68.4] - 2024-06-23
### Bug Fixes
- if the query is empty but astring, getSlottedElements must not report an error [#208](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/208)
-
-
## [3.68.3] - 2024-06-23
### Bug Fixes
- working on ci pipeline
-
-
-## [3.68.2] - 2024-06-23
-
-### Bug Fixes
-
-- gitlab pipeline
-
-
-
-## [3.68.1] - 2024-06-23
-
-### Bug Fixes
-
-- wip pipeline
-
## [3.68.0] - 2024-06-23
### Add Features
diff --git a/development/issues/open/186.html b/development/issues/open/186.html
index f9b00853be8d97e9c029f350cf2be7f66ed074ae..475880f42086f6732a09f2026370187e206a9f34 100644
--- a/development/issues/open/186.html
+++ b/development/issues/open/186.html
@@ -14,16 +14,14 @@
<li><a href="/">Back to overview</a></li>
</ul>
<main>
- <monster-field-set>
-dsfasdfsdf
- <label slot="extended">N1<input type="text" name="name1" id="name1" placeholder="Name1"></label>
- <label slot="extended">N2<input type="text" name="name2" id="name2" placeholder="Name2"></label>
- <label slot="extended">N3<input type="text" name="name3" id="name3" placeholder="Name3"></label>
- <label>N4<input type="text" name="name4" id="name4" placeholder="Name4"></label>
- <label>N5<input type="text" name="name5" id="name5" placeholder="Name5"></label>
-
- </monster-field-set>
+ <monster-field-set data-monster-option-labels-title="my title">
+ <label for="name1" slot="extended">N1</label><input slot="extended" type="text" name="name1" id="name1" placeholder="Name1">
+ <label for="name2" slot="extended">N2</label><input slot="extended" type="text" name="name2" id="name2" placeholder="Name2">
+ <label for="name3" slot="extended">N3</label><input slot="extended" type="text" name="name3" id="name3" placeholder="Name2">
+ <label for="name4">N4</label><input type="text" name="name4" id="name4" placeholder="Name4">
+ <label for="name5">N5</label><input type="text" name="name5" id="name5" placeholder="Name5">
+ </monster-field-set>
</main>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/development/issues/open/186.mjs b/development/issues/open/186.mjs
index c89cea4f5dc170866e3d99d1c7b4997e11a36f12..c9115c965af8866a22b2ac0cb53cc07adf662d21 100644
--- a/development/issues/open/186.mjs
+++ b/development/issues/open/186.mjs
@@ -7,6 +7,7 @@
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/form.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/field-set.mjs";
diff --git a/nix/config/release.nix b/nix/config/release.nix
index 1ccac2381f3aba2453fd3e71ae59c86b8d1c7160..720a557995aafc469f36130edaa1b4f99be8dd04 100644
--- a/nix/config/release.nix
+++ b/nix/config/release.nix
@@ -3,4 +3,4 @@
commit = "f89e03438abbb5edb811c169027bf765e7b17a9d";
name = "Monster";
mnemonic = "monster";
-}
\ No newline at end of file
+}
diff --git a/nix/scripts/deploy.nix b/nix/scripts/deploy.nix
index 224ae6eef6a60d401775a7a73b665eca3aba311c..0bd6e8d7dde9fb4d77fa8d798df0a5372c6f1548 100644
--- a/nix/scripts/deploy.nix
+++ b/nix/scripts/deploy.nix
@@ -40,22 +40,22 @@ in
json=$(jq -n \
--arg name "$(echo $publishingResult | jq -r .name)" \
--arg version "$(echo $publishingResult | jq -r .version)" \
- '{text: ("Oh no, we failed to publish the " + $version + " version of " + $name + " :x:")}')
-
+ '{text: ("Oh no, we failed to publish the " + $version + " version of " + $name + " :x:")}')
+
${pkgs'.curl}/bin/curl --header "Content-Type: application/json" --request POST \
--data "$json" $MATTERMOST_WEBHOOK
exit 1
fi
-
+
json=$(jq -n \
--arg name "$(echo $publishingResult | jq -r .name)" \
--arg version "$(echo $publishingResult | jq -r .version)" \
'{icon_emoji: ":monster:", text: ("We have just launched the " + $version + " version of " + $name + "! Give it a try. :rocket:")}')
-
+
${pkgs'.curl}/bin/curl --header "Content-Type: application/json" --request POST \
--data "$json" $MATTERMOST_WEBHOOK
-
+
echo_ok "Build and publish successful."
''
diff --git a/source/components/datatable/filter.mjs b/source/components/datatable/filter.mjs
index efca949929effae03c6dcd33c68926bf803800f9..b125a85ff9d2d7a6df26341e43070652bb8334e5 100644
--- a/source/components/datatable/filter.mjs
+++ b/source/components/datatable/filter.mjs
@@ -234,11 +234,10 @@ class Filter extends CustomElement {
formatter: {
marker: {
open: null,
- close: null
- }
+ close: null,
+ },
},
labels: {
-
search: "Search",
reset: "Reset",
save: "Save",
@@ -1013,7 +1012,10 @@ function collectSearchQueries() {
});
if (self.getOption("formatter.marker.open")) {
- formatter.setMarker(self.getOption("formatter.marker.open"),self.getOption("formatter.marker.close"));
+ formatter.setMarker(
+ self.getOption("formatter.marker.open"),
+ self.getOption("formatter.marker.close"),
+ );
}
let queryPart = formatter.format(template);
diff --git a/source/components/form/field-set.mjs b/source/components/form/field-set.mjs
index 54aff9373d3ca85544433c2a08e63ce2c512931c..c9f2168c789fa20dff8c178862854534e4b7e8b6 100644
--- a/source/components/form/field-set.mjs
+++ b/source/components/form/field-set.mjs
@@ -12,25 +12,24 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
import {
- ATTRIBUTE_ERRORMESSAGE,
- ATTRIBUTE_ROLE,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
+ assembleMethodSymbol,
+ getSlottedElements,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
-import {FieldSetStyleSheet} from "./stylesheet/field-set.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
import "../layout/collapse.mjs";
-import {ToggleSwitch} from "./toggle-switch.mjs";
+import "./toggle-switch.mjs";
-export {FieldSet};
+export { FieldSet };
/**
* @private
@@ -44,6 +43,18 @@ const fieldSetElementSymbol = Symbol("fieldSetElement");
*/
const collapseElementSymbol = Symbol("collapseElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const extendedSwitchSymbol = Symbol("extendedSwitch");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const headerElementSymbol = Symbol("headerElement");
+
/**
* @private
* @type {symbol}
@@ -90,174 +101,179 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
* @summary A simple FieldSet
*/
class FieldSet extends CustomControl {
- /**
- * This method is called by the `instanceof` operator.
- * @returns {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
- }
-
- /**
- *
- * @return {Components.Form.FieldSet
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
- initControlReferences.call(this);
- initEventHandler.call(this);
- updateExtendedFields.call(this);
- return this;
- }
-
- /**
- * 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 Template definitions
- * @property {string} templates.main Main template
- * @property {Object} labels Label definitions
- * @property {Object} actions Callbacks
- * @property {string} actions.click="throw Error" Callback when clicked
- * @property {Object} features Features
- * @property {Object} classes CSS classes
- * @property {boolean} disabled=false Disabled state
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
- labels: {},
- classes: {},
- disabled: false,
- features: {},
- actions: {
- click: () => {
- throw new Error("the click action is not defined");
- },
- },
- value: null,
- });
- }
-
- /**
- *
- * @return {string}
- */
- static getTag() {
- return "monster-field-set";
- }
-
- /**
- *
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [FieldSetStyleSheet];
- }
-
- /**
- * The FieldSet.click() method simulates a click on the internal element.
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
- */
- click() {
- if (this.getOption("disabled") === true) {
- return;
- }
-
- if (
- this[fieldSetElementSymbol] &&
- isFunction(this[fieldSetElementSymbol].click)
- ) {
- this[fieldSetElementSymbol].click();
- }
- }
-
- /**
- * The Button.focus() method sets focus on the internal element.
- *
- * @param {Object} options
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
- */
- focus(options) {
- if (this.getOption("disabled") === true) {
- return;
- }
-
- if (
- this[fieldSetElementSymbol] &&
- isFunction(this[fieldSetElementSymbol].focus)
- ) {
- this[fieldSetElementSymbol].focus(options);
- }
- }
-
- /**
- * The Button.blur() method removes focus from the internal element.
- */
- blur() {
- if (
- this[fieldSetElementSymbol] &&
- isFunction(this[fieldSetElementSymbol].blur)
- ) {
- this[fieldSetElementSymbol].blur();
- }
- }
-
- /**
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
- * @return {boolean}
- */
- static get formAssociated() {
- return true;
- }
-
- /**
- * The current value of the form control.
- *
- * ```js
- * e = document.querySelector('monster-field-set');
- * console.log(e.value)
- * ```
- *
- * @property {string}
- */
- get value() {
- return this.getOption("value");
- }
-
- /**
- * Set value of the form control.
- *
- * ```
- * e = document.querySelector('monster-field-set');
- * e.value=1
- * ```
- *
- * @property {string} value
- * @throws {Error} unsupported type
- */
- set value(value) {
- this.setOption("value", value);
- try {
- this?.setFormValue(this.value);
- } catch (e) {
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
- }
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
+ }
+
+ /**
+ * @return {Components.Form.FieldSet
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ updateExtendedFields.call(this);
+ return this;
+ }
+
+ /**
+ * 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 Template definitions
+ * @property {string} templates.main Main template
+ * @property {Object} labels Label definitions
+ * @property {Object} actions Callbacks
+ * @property {string} actions.click="throw Error" Callback when clicked
+ * @property {Object} features Features
+ * @property {Object} classes CSS classes
+ * @property {boolean} disabled=false Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ labels: {
+ "toggle-switch-on": "✔",
+ "toggle-switch-off": "✖",
+ "toggle-switch-label": "Expand",
+ title: "",
+ },
+ classes: {},
+ disabled: false,
+ features: {},
+ actions: {
+ click: () => {
+ throw new Error("the click action is not defined");
+ },
+ },
+ value: null,
+ });
+ }
+
+ /**
+ *
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-field-set";
+ }
+
+ /**
+ *
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [FieldSetStyleSheet];
+ }
+
+ /**
+ * The FieldSet.click() method simulates a click on the internal element.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+ */
+ click() {
+ if (this.getOption("disabled") === true) {
+ return;
+ }
+
+ if (
+ this[fieldSetElementSymbol] &&
+ isFunction(this[fieldSetElementSymbol].click)
+ ) {
+ this[fieldSetElementSymbol].click();
+ }
+ }
+
+ /**
+ * The Button.focus() method sets focus on the internal element.
+ *
+ * @param {Object} options
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+ */
+ focus(options) {
+ if (this.getOption("disabled") === true) {
+ return;
+ }
+
+ if (
+ this[fieldSetElementSymbol] &&
+ isFunction(this[fieldSetElementSymbol].focus)
+ ) {
+ this[fieldSetElementSymbol].focus(options);
+ }
+ }
+
+ /**
+ * The Button.blur() method removes focus from the internal element.
+ */
+ blur() {
+ if (
+ this[fieldSetElementSymbol] &&
+ isFunction(this[fieldSetElementSymbol].blur)
+ ) {
+ this[fieldSetElementSymbol].blur();
+ }
+ }
+
+ /**
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+ * @return {boolean}
+ */
+ static get formAssociated() {
+ return true;
+ }
+
+ /**
+ * The current value of the form control.
+ *
+ * ```js
+ * e = document.querySelector('monster-field-set');
+ * console.log(e.value)
+ * ```
+ *
+ * @property {string}
+ */
+ get value() {
+ return this.getOption("value");
+ }
+
+ /**
+ * Set value of the form control.
+ *
+ * ```
+ * e = document.querySelector('monster-field-set');
+ * e.value=1
+ * ```
+ *
+ * @property {string} value
+ * @throws {Error} unsupported type
+ */
+ set value(value) {
+ this.setOption("value", value);
+ try {
+ this?.setFormValue(this.value);
+ } catch (e) {
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
+ }
}
function updateExtendedFields() {
- // check if slot has extended fields
- getSlottedElements.call(this, "", "extended").forEach((node) => {
- if (node.hasAttribute(ATTRIBUTE_EXTENDED)) {
- this.hasExtended = true;
- }
- })
+ const nodes = getSlottedElements.call(this, "", "extended");
+ console.log(nodes.size);
+ if (nodes.size > 0) {
+ this[extendedSwitchSymbol].classList.remove("hidden");
+ } else {
+ this[extendedSwitchSymbol].classList.add("hidden");
+ }
}
/**
@@ -266,78 +282,53 @@ function updateExtendedFields() {
* @fires Monster.Components.Form.event:monster-field-set-clicked
*/
function initEventHandler() {
- // const self = this;
- // const element = this[fieldSetElementSymbol];
- //
- // const type = "click";
-
- // element.addEventListener(type, function (event) {
- // const callback = self.getOption("actions.click");
- //
- // fireCustomEvent(self, "monster-field-set-clicked", {
- // element: self,
- // });
- //
- // if (!isFunction(callback)) {
- // return;
- // }
- //
- // const element = findTargetElementFromEvent(
- // event,
- // ATTRIBUTE_ROLE,
- // "control",
- // );
- //
- // if (!(element instanceof Node && self.hasNode(element))) {
- // return;
- // }
- //
- // callback.call(self, event);
- // });
-
-
- this[toggleSwitchElementSymbol].setOption("actions.on", () => {
- console.log( this[collapseElementSymbol],"!!!")
- this[collapseElementSymbol].open();
- });
-
- this[toggleSwitchElementSymbol].setOption("actions.off", () => {
- this[collapseElementSymbol].close();
- });
-
- // this[extendedSwitchElementSymbol].addEventListener(type, function (event) {
- // const element = findTargetElementFromEvent(
- // event,
- // ATTRIBUTE_ROLE,
- // "extended-switch",
- // );
- //
- //
- //
- // })
-
- return this;
+ this[toggleSwitchElementSymbol].setOption(
+ "labels.toggle-switch-on",
+ this.getOption("labels.toggle-switch-on"),
+ );
+ this[toggleSwitchElementSymbol].setOption(
+ "labels.toggle-switch-off",
+ this.getOption("labels.toggle-switch-off"),
+ );
+
+ this[toggleSwitchElementSymbol].setOption("actions.on", () => {
+ this[collapseElementSymbol].open();
+ });
+
+ this[toggleSwitchElementSymbol].setOption("actions.off", () => {
+ this[collapseElementSymbol].close();
+ });
+
+ return this;
}
/**
* @private
*/
function initControlReferences() {
- this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="control"]`,
- );
+ this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
+
+ this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="extended-switch"]`,
+ );
+
+ this[collapseElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="collapse"]`,
+ );
- this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="extended-switch"]`,
- );
+ this[headerElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="header"]`,
+ );
- this[collapseElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="collapse"]`,
- );
+ this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="extended-switch"]`,
+ );
- this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
- `monster-toggle-switch`,
- );
+ this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
+ `monster-toggle-switch`,
+ );
}
/**
@@ -345,14 +336,20 @@ function initControlReferences() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
<div data-monster-role="header">
- <monster-toggle-switch class="hidden"></monster-toggle-switch>
+ <div data-monster-replace="path:labels.title" data-monster-role="title"></div>
+ <div data-monster-role="extended-switch">
+ <label data-monster-replace="path:labels.toggle-switch-label"></label>
+ <monster-toggle-switch></monster-toggle-switch>
+ </div>
</div>
<div>
- <slot></slot>
+ <div class="collapse-alignment">
+ <slot></slot>
+ </div>
<monster-collapse data-monster-role="collapse">
<slot name="extended"></slot>
</monster-collapse>
diff --git a/source/components/form/style/field-set.pcss b/source/components/form/style/field-set.pcss
index 3684f709bb205ca740c07f93e8c4afb43d22a0a5..5d5a56bc48708a065f82a811636d5c056ca44b28 100644
--- a/source/components/form/style/field-set.pcss
+++ b/source/components/form/style/field-set.pcss
@@ -1,3 +1,5 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
@import "../../style/display.pcss";
@import "../../style/border.pcss";
@import "../../style/control.pcss";
@@ -9,12 +11,34 @@
@import "../../style/floating-ui.pcss";
[data-monster-role=control] {
-
+
+ & .collapse-alignment {
+ padding: 0 1rem;
+ }
+
+
}
[data-monster-role=header] {
display: flex;
align-items: center;
- justify-content: flex-end;
+ justify-content: space-between;
+ border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-color-primary-1);
+ margin-bottom: 1rem;
+ padding-bottom: 0.2rem;
+
+ & label {
+ padding-right: 0.3rem;
+ }
+
+ & [data-monster-role=extended-switch] {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ & [data-monster-role=title] {
+ font-weight: bold;
+ }
}
diff --git a/source/components/form/stylesheet/toggle-switch.mjs b/source/components/form/stylesheet/toggle-switch.mjs
index a47a82dc395bcac45d814d48f55f4e840056b477..322fcc419969782d9e58fc35fb1c6c5376c3e54e 100644
--- a/source/components/form/stylesheet/toggle-switch.mjs
+++ b/source/components/form/stylesheet/toggle-switch.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {ToggleSwitchStyleSheet}
+export { ToggleSwitchStyleSheet };
/**
* @private
@@ -22,10 +22,17 @@ export {ToggleSwitchStyleSheet}
const ToggleSwitchStyleSheet = new CSSStyleSheet();
try {
- ToggleSwitchStyleSheet.insertRule(`
+ ToggleSwitchStyleSheet.insertRule(
+ `
@layer toggleswitch {
:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;font-family:inherit;font-size:inherit;margin:0;outline:none}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}[data-monster-role=control] .switch{border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-sizing:border-box;display:inline-grid;grid-template-columns:1fr 1fr;position:relative;transition:background-color .2s;width:100%}[data-monster-role=control] .label{display:block;max-width:100%;overflow:hidden;padding:0 .2em;text-align:center;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[data-monster-role=control] .switch-slider{bottom:4px;left:4px;position:absolute;right:4px;top:4px;transition:.2s;width:calc(50% - 4px)}[data-monster-role=control] .switch[data-monster-state=on] .label.off{visibility:hidden}[data-monster-role=control] .switch[data-monster-state=off] .label.off,[data-monster-role=control] .switch[data-monster-state=on] .label.on{visibility:visible}[data-monster-role=control] .switch[data-monster-state=off] .label.on{visibility:hidden}[data-monster-role=control] .switch[data-monster-state=on] .switch-slider{transform:translateX(100%)}
-}`, 0);
+}`,
+ 0,
+ );
} catch (e) {
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+ addAttributeToken(
+ document.getRootNode().querySelector("html"),
+ ATTRIBUTE_ERRORMESSAGE,
+ e + "",
+ );
}
diff --git a/source/components/form/toggle-switch.mjs b/source/components/form/toggle-switch.mjs
index 9d4c67576bdbe788142bb44e00fcbd9db5fe32e0..2d6af8e13b6bfe054e12cef921da6a41ae12873f 100644
--- a/source/components/form/toggle-switch.mjs
+++ b/source/components/form/toggle-switch.mjs
@@ -12,26 +12,26 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {internalSymbol} from "../../constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {ProxyObserver} from "../../types/proxyobserver.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
- updaterTransformerMethodsSymbol,
+ assembleMethodSymbol,
+ registerCustomElement,
+ updaterTransformerMethodsSymbol,
} from "../../dom/customelement.mjs";
-import {isObject, isFunction} from "../../types/is.mjs";
-import {ToggleSwitchStyleSheet} from "./stylesheet/toggle-switch.mjs";
+import { isObject, isFunction } from "../../types/is.mjs";
+import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
import {
- ATTRIBUTE_ERRORMESSAGE,
- ATTRIBUTE_ROLE,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
-export {ToggleSwitch};
+export { ToggleSwitch };
/**
* @private
@@ -69,344 +69,343 @@ export const STATE_OFF = "off";
* @summary A simple toggle switch
*/
class ToggleSwitch extends CustomControl {
- /**
- * 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 {string} value=current value of the element
- * @property {Boolean} disabled=disabled=false Disabled state
- * @property {Object} classes
- * @property {string} classes.on=specifies the class for the on state.
- * @property {string} classes.off=specifies the class for the off state.
- * @property {Object} values
- * @property {string} values.off=specifies the value of the element if it is not selected
- * @property {Object} labels
- * @property {string} labels.on=specifies the label for the on state.
- * @property {string} labels.off=specifies the label for the off state.
- * @property {string} actions
- * @property {string} actions.on=specifies the action for the on state.
- * @property {string} actions.off=specifies the action for the off state.
- * @property {Object} templates
- * @property {string} templates.main=specifies the main template used by the control.
- *
- * @since 3.57.0
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- value: null,
- disabled: false,
- classes: {
- on: "monster-theme-on",
- off: "monster-theme-off",
- handle: "monster-theme-primary-1",
- },
- values: {
- on: "on",
- off: "off",
- },
- labels: {
- "toggle-switch-on": "ON",
- "toggle-switch-off": "OFF",
- },
- templates: {
- main: getTemplate(),
- },
- actions: {
- on: () => {
- throw new Error("the on action is not defined");
- },
- off: () => {
- throw new Error("the off action is not defined");
- },
- }
- });
- }
-
- /**
- * @return {ToggleSwitch}
- */
- [assembleMethodSymbol]() {
- const self = this;
- super[assembleMethodSymbol]();
- initControlReferences.call(this);
- initEventHandler.call(this);
-
- /**
- * init value to off
- * if the value was not defined before inserting it into the HTML
- */
- if (self.getOption("value") === null) {
- self.setOption("value", self.getOption("values.off"));
- }
-
- /**
- * value from attribute
- */
- if (self.hasAttribute("value")) {
- self.setOption("value", self.getAttribute("value"));
- }
-
- /**
- * validate value
- */
- validateAndSetValue.call(self);
-
- if (this.state === STATE_ON) {
- toggleClassOn.call(self);
- } else {
- toggleClassOff.call(self);
- }
-
- /**
- * is called when options changed
- */
- self[internalSymbol].attachObserver(
- new Observer(function () {
- if (isObject(this) && this instanceof ProxyObserver) {
- validateAndSetValue.call(self);
- toggleClass.call(self);
- }
- }),
- );
-
- return this;
- }
-
- /**
- * updater transformer methods for pipe
- *
- * @return {function}
- */
- [updaterTransformerMethodsSymbol]() {
- return {
- "state-callback": (Wert) => {
- return this.state;
- },
- };
- }
-
- /**
- * @return [CSSStyleSheet]
- */
- static getCSSStyleSheet() {
- return [ToggleSwitchStyleSheet];
- }
-
- /**
- * toggle switch
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * e.click()
- * ```
- */
- click() {
- toggleValues.call(this);
- }
-
- /**
- * toggle switch on/off
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * e.toggle()
- * ```
- *
- * @return {ToggleSwitch}
- */
- toggle() {
- this.click();
- return this;
- }
-
- /**
- * toggle switch on
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * e.toggleOn()
- * ```
- *
- * @return {ToggleSwitch}
- */
- toggleOn() {
- this.setOption("value", this.getOption("values.on"));
- return this;
- }
-
- /**
- * toggle switch off
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * e.toggleOff()
- * ```
- *
- * @return {ToggleSwitch}
- */
- toggleOff() {
- this.setOption("value", this.getOption("values.off"));
- return this;
- }
-
- /**
- * returns the status of the element
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * console.log(e.state)
- * // ↦ off
- * ```
- *
- * @return {string}
- */
- get state() {
- return this.getOption("value") === this.getOption("values.on")
- ? STATE_ON
- : STATE_OFF;
- }
-
- /**
- * The current value of the Switch
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * console.log(e.value)
- * // ↦ on
- * ```
- *
- * @return {string}
- */
- get value() {
- return this.state === STATE_ON
- ? this.getOption("values.on")
- : this.getOption("values.off");
- }
-
- /**
- * Set value
- *
- * ```
- * e = document.querySelector('monster-toggle-switch');
- * e.value="on"
- * ```
- *
- * @property {string} value
- */
- set value(value) {
- this.setOption("value", value);
- }
-
- /**
- * This method is called by the `instanceof` operator.
- * @returns {symbol}
- * @since 2.1.0
- */
- static get [instanceSymbol]() {
- return Symbol.for(
- "@schukai/monster/components/form/toggle-switch@@instance",
- );
- }
-
- static getTag() {
- return "monster-toggle-switch";
- }
+ /**
+ * 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 {string} value=current value of the element
+ * @property {Boolean} disabled=disabled=false Disabled state
+ * @property {Object} classes
+ * @property {string} classes.on=specifies the class for the on state.
+ * @property {string} classes.off=specifies the class for the off state.
+ * @property {Object} values
+ * @property {string} values.off=specifies the value of the element if it is not selected
+ * @property {Object} labels
+ * @property {string} labels.on=specifies the label for the on state.
+ * @property {string} labels.off=specifies the label for the off state.
+ * @property {string} actions
+ * @property {string} actions.on=specifies the action for the on state.
+ * @property {string} actions.off=specifies the action for the off state.
+ * @property {Object} templates
+ * @property {string} templates.main=specifies the main template used by the control.
+ *
+ * @since 3.57.0
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ value: null,
+ disabled: false,
+ classes: {
+ on: "monster-theme-on",
+ off: "monster-theme-off",
+ handle: "monster-theme-primary-1",
+ },
+ values: {
+ on: "on",
+ off: "off",
+ },
+ labels: {
+ "toggle-switch-on": "ON",
+ "toggle-switch-off": "OFF",
+ },
+ templates: {
+ main: getTemplate(),
+ },
+ actions: {
+ on: () => {
+ throw new Error("the on action is not defined");
+ },
+ off: () => {
+ throw new Error("the off action is not defined");
+ },
+ },
+ });
+ }
+
+ /**
+ * @return {ToggleSwitch}
+ */
+ [assembleMethodSymbol]() {
+ const self = this;
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+
+ /**
+ * init value to off
+ * if the value was not defined before inserting it into the HTML
+ */
+ if (self.getOption("value") === null) {
+ self.setOption("value", self.getOption("values.off"));
+ }
+
+ /**
+ * value from attribute
+ */
+ if (self.hasAttribute("value")) {
+ self.setOption("value", self.getAttribute("value"));
+ }
+
+ /**
+ * validate value
+ */
+ validateAndSetValue.call(self);
+
+ if (this.state === STATE_ON) {
+ toggleClassOn.call(self);
+ } else {
+ toggleClassOff.call(self);
+ }
+
+ /**
+ * is called when options changed
+ */
+ self[internalSymbol].attachObserver(
+ new Observer(function () {
+ if (isObject(this) && this instanceof ProxyObserver) {
+ validateAndSetValue.call(self);
+ toggleClass.call(self);
+ }
+ }),
+ );
+
+ return this;
+ }
+
+ /**
+ * updater transformer methods for pipe
+ *
+ * @return {function}
+ */
+ [updaterTransformerMethodsSymbol]() {
+ return {
+ "state-callback": (Wert) => {
+ return this.state;
+ },
+ };
+ }
+
+ /**
+ * @return [CSSStyleSheet]
+ */
+ static getCSSStyleSheet() {
+ return [ToggleSwitchStyleSheet];
+ }
+
+ /**
+ * toggle switch
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * e.click()
+ * ```
+ */
+ click() {
+ toggleValues.call(this);
+ }
+
+ /**
+ * toggle switch on/off
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * e.toggle()
+ * ```
+ *
+ * @return {ToggleSwitch}
+ */
+ toggle() {
+ this.click();
+ return this;
+ }
+
+ /**
+ * toggle switch on
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * e.toggleOn()
+ * ```
+ *
+ * @return {ToggleSwitch}
+ */
+ toggleOn() {
+ this.setOption("value", this.getOption("values.on"));
+ return this;
+ }
+
+ /**
+ * toggle switch off
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * e.toggleOff()
+ * ```
+ *
+ * @return {ToggleSwitch}
+ */
+ toggleOff() {
+ this.setOption("value", this.getOption("values.off"));
+ return this;
+ }
+
+ /**
+ * returns the status of the element
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * console.log(e.state)
+ * // ↦ off
+ * ```
+ *
+ * @return {string}
+ */
+ get state() {
+ return this.getOption("value") === this.getOption("values.on")
+ ? STATE_ON
+ : STATE_OFF;
+ }
+
+ /**
+ * The current value of the Switch
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * console.log(e.value)
+ * // ↦ on
+ * ```
+ *
+ * @return {string}
+ */
+ get value() {
+ return this.state === STATE_ON
+ ? this.getOption("values.on")
+ : this.getOption("values.off");
+ }
+
+ /**
+ * Set value
+ *
+ * ```
+ * e = document.querySelector('monster-toggle-switch');
+ * e.value="on"
+ * ```
+ *
+ * @property {string} value
+ */
+ set value(value) {
+ this.setOption("value", value);
+ }
+
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ * @since 2.1.0
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for(
+ "@schukai/monster/components/form/toggle-switch@@instance",
+ );
+ }
+
+ static getTag() {
+ return "monster-toggle-switch";
+ }
}
/**
* @private
*/
function initControlReferences() {
- this[switchElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=switch]`,
- );
+ this[switchElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=switch]`,
+ );
}
/**
* @private
*/
function toggleClassOn() {
- this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
- this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
+ this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
+ this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
}
/**
* @private
*/
function toggleClassOff() {
- this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
- this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
+ this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
+ this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
}
/**
* @private
*/
function toggleClass() {
- if (this.getOption("value") === this.getOption("values.on")) {
- toggleClassOn.call(this);
- } else {
- toggleClassOff.call(this);
- }
+ if (this.getOption("value") === this.getOption("values.on")) {
+ toggleClassOn.call(this);
+ } else {
+ toggleClassOff.call(this);
+ }
}
/**
* @private
*/
function toggleValues() {
- if (this.getOption("disabled") === true) {
- return;
- }
+ if (this.getOption("disabled") === true) {
+ return;
+ }
- let callback, value;
+ let callback, value;
- if (this.getOption("value") === this.getOption("values.on")) {
- value = this.getOption("values.off");
- callback = this.getOption("actions.off");
- } else {
- value = this.getOption("values.on");
- callback = this.getOption("actions.on");
- }
+ if (this.getOption("value") === this.getOption("values.on")) {
+ value = this.getOption("values.off");
+ callback = this.getOption("actions.off");
+ } else {
+ value = this.getOption("values.on");
+ callback = this.getOption("actions.on");
+ }
- this.setOption("value", value);
- this?.setFormValue(value);
+ this.setOption("value", value);
+ this?.setFormValue(value);
- if (isFunction(callback)) {
- callback.call(this)();
- }
+ if (isFunction(callback)) {
+ callback.call(this);
+ }
-
- this.setOption("state", this.state);
+ this.setOption("state", this.state);
}
/**
* @private
*/
function validateAndSetValue() {
- const value = this.getOption("value");
-
- const validatedValues = [];
- validatedValues.push(this.getOption("values.on"));
- validatedValues.push(this.getOption("values.off"));
-
- if (validatedValues.includes(value) === false) {
- addAttributeToken(
- this,
- ATTRIBUTE_ERRORMESSAGE,
- 'The value "' +
- value +
- '" must be "' +
- this.getOption("values.on") +
- '" or "' +
- this.getOption("values.off"),
- );
- this.setOption("disabled", true);
- this.formDisabledCallback(true);
- } else {
- this.setOption("disabled", false);
- this.formDisabledCallback(false);
- }
+ const value = this.getOption("value");
+
+ const validatedValues = [];
+ validatedValues.push(this.getOption("values.on"));
+ validatedValues.push(this.getOption("values.off"));
+
+ if (validatedValues.includes(value) === false) {
+ addAttributeToken(
+ this,
+ ATTRIBUTE_ERRORMESSAGE,
+ 'The value "' +
+ value +
+ '" must be "' +
+ this.getOption("values.on") +
+ '" or "' +
+ this.getOption("values.off"),
+ );
+ this.setOption("disabled", true);
+ this.formDisabledCallback(true);
+ } else {
+ this.setOption("disabled", false);
+ this.formDisabledCallback(false);
+ }
}
/**
@@ -414,16 +413,16 @@ function validateAndSetValue() {
* @return {initEventHandler}
*/
function initEventHandler() {
- const self = this;
- self.addEventListener("keyup", function (event) {
- if (event.code === "Space") {
- self[switchElementSymbol].click();
- }
- });
- self.addEventListener("click", function (event) {
- toggleValues.call(self);
- });
- return this;
+ const self = this;
+ self.addEventListener("keyup", function (event) {
+ if (event.code === "Space") {
+ self[switchElementSymbol].click();
+ }
+ });
+ self.addEventListener("click", function (event) {
+ toggleValues.call(self);
+ });
+ return this;
}
/**
@@ -431,8 +430,8 @@ function initEventHandler() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control" tabindex="0">
<div class="switch" data-monster-role="switch"
data-monster-attributes="data-monster-state path:value | call:state-callback">