Skip to content
Snippets Groups Projects
Verified Commit 8228317a authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: new field-set control #186

parent 3b477b81
No related branches found
No related tags found
No related merge requests found
# 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
......
......@@ -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
......@@ -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";
......
......@@ -3,4 +3,4 @@
commit = "f89e03438abbb5edb811c169027bf765e7b17a9d";
name = "Monster";
mnemonic = "monster";
}
\ No newline at end of file
}
......@@ -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."
''
......@@ -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);
......
......@@ -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>
......
@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;
}
}
......@@ -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 + "",
);
}
......@@ -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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment