Introduction

Monster is a lightweight, robust and easy-to-use library with modest ambitions.
Monster integrates easily with your existing websites without taking over everything.

Here’s what Monster is all about. In section Getting Started you can read how to integrate Monster into your own web projects.

Monster has a free license, and therefore you are free to customize Monster to your needs.

Monster is a collection of functions and classes that can help in the daily work
with Javascript to get faster to the goal. Monster does not require you to be the
only library, nor does it require you to use only Monster.

Monster itself has no dependencies and works perfectly with other frameworks
like jQuery or Bootstrap.

The design goals of Monster’s core library are:

Easy integration with existing user interfaces.
Robust interfaces
Tested code and good code coverage.
No dependencies on other libraries

Why Components?

JavaScript web components are useful for creating reusable, modular and maintainable web applications. Below are some of the reasons why developers should choose to use a JavaScript web component framework such as MonsterJS:

Reusability: web components are self-contained entities that can be easily reused in different parts of an application, reducing the amount of duplicate code and increasing maintainability.

Modularity: Web components can be assembled from other web components, allowing developers to create complex user interfaces from small, modular building blocks.

Interoperability: Web components are developed based on web standards and are therefore compatible with other web technologies and frameworks. This allows developers to easily integrate web components into their existing applications.

Performance: Web components are lightweight and powerful, they can be rendered and updated quickly, which can improve the overall performance of web applications.

Acceptability: web components are increasingly used by browsers and developers and are part of the web platform, making it easy to find support and guidance online.

Flexible: web components are not tied to a specific framework, so developers can choose the tools that best suit their needs.

Overall, MonsterJS and its web components offer a great way to improve the scalability, maintainability and performance of web applications.

Getting Started

To use Monster, you must have a foundation in HTML, CSS, and JavaScript. If you are just starting out in frontend development, it is recommended that you have a beginner’s guide open while working through this guide.

You can also ask for help on Stack Overflow by tagging your questions with “javascript” and “monster”.

Using Monster in the browser

To get started with Monster, all you need is a text editor and a browser. The best way to begin is to copy the following example into a file and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Unleash your inner monster!</title>
</head>
<body>

<div>Your version is:
    <span id="version"></span>
</div>

<script type="module">
    import { Version } from 'https://cdn.skypack.dev/@schukai/[email protected]/source/types/version.js';
    document.getElementById('version').innerText = new Version('1.0.0').toString();
</script>

</body>
</html>

Then, open this file in your browser. You have now used the ‘Version’ class from Monster to create a Version object, which is output in a span.

Congratulations!

As shown in the version example, each Monster class or function can be used independently. Alternatively, Monster can be used as a collection of many useful classes and functions via the Monster namespace as a single JavaScript file.

In addition to being available on CDN providers like jsDelivr and Skypack, Monster can also be obtained via NPM or the git repos.

Monster itself has no dependencies and does not impose any specific requirements, so you can use it with Bootstrap, jQuery, or other frameworks.

Using Monster with NPM

To install Monster using npm, you will need to have Node.js and npm (which comes with Node.js) installed on your system.

Open a terminal or command prompt on your computer.
Run the following command: npm install @schukai/monster

This will install the latest version of Monster from the npm registry. If you want to install a specific version of Monster, you can specify the version number after the package name, like this: npm install @schukai/[email protected].

Once the installation is complete, you can import the modules in your JavaScript file like this:

import {Version} from '@schukai/monster/source/types/version.js';
console.log(new Version('1.0.0').toString());

Instead of npm you can of course also use yarn or pnpm.

Text

Functions and classes in this section are used to handle text.

Formatter

The Formatter class allows you to format messages by replacing placeholders with values from an object. It supports nested placeholders, callbacks, and custom markers. The class is part of the Monster.Text module.

Installation

npm install @schukai/monster

Usage

import {Formatter} from '@schukai/monster/source/text/formatter.mjs';

Basic Usage

Create an instance of the Formatter class by passing an object containing the values to be used for formatting. Then, call the format method with a string containing placeholders.

const formatter = new Formatter({
    key: 'value',
    nested: {
        key: 'nested value',
    },
});

const formattedText = formatter.format('This is a ${key} and this is a ${nested.key}');
console.log(formattedText); // Output: "This is a value and this is a nested value"

Nested Placeholders

Placeholders can be nested, allowing you to use the value of an inner placeholder as a key for an outer placeholder.

const text = '${mykey${subkey}}';
const obj = {
    mykey2: '1',
    subkey: '2',
};

const formatter = new Formatter(obj);
console.log(formatter.format(text)); // Output: "1"

Callbacks

You can adjust the values in a formatter using callbacks.

const formatter = new Formatter({x: '1'}, {
    callbacks: {
        quote: (value) => {
            return '"' + value + '"';
        },
    },
});

console.log(formatter.format('${x | call:quote}')); // Output: "\"1\""

Custom Markers

You can customize the markers for the placeholders by calling the setMarker method.


formatter.setMarker('#'); // both open and close markers are #
formatter.setMarker('[', ']');
formatter.setMarker('i18n{', '}');

generateRangeComparisonExpression

This documentation describes the generateRangeComparisonExpression function, its parameters, return value, and an example usage.

generateRangeComparisonExpression(expression, valueName, options = {}) generates a comparison expression for a comma-separated string of ranges and single values.

Parameters

expression (string): The string expression containing comma-separated ranges and single values to generate the comparison for.
valueName (string): The name of the value to compare against in the generated expression.
options (Object, optional): The optional parameters for the function. Defaults to an empty object.
urlEncode (boolean, optional): Whether to encode comparison operators for use in a URL. Defaults to false.
andOp (string, optional): The logical AND operator to use. Defaults to ‘&&’.
orOp (string, optional): The logical OR operator to use. Defaults to ‘||’.
eqOp (string, optional): The comparison operator for equality to use. Defaults to ‘==’.
geOp (string, optional): The comparison operator for greater than or equal to use. Defaults to ‘>=’.
leOp (string, optional): The comparison operator for less than or equal to use. Defaults to ‘<’.

Returns

(string): The generated comparison expression.

Throws

Error: If the input expression contains invalid ranges or values.

Example


const expression = "1,3,5-7";
const valueName = "x";
const comparisonExpression = generateRangeComparisonExpression(expression, valueName);
console.log(comparisonExpression); // "(x==1) || (x==3) || (x>=5 && x<=7)"

Data

Functions and classes in this section are used to handle data.

Pathfinder

The Pathfinder class is used to access a specific path in a data object.

import {Pathfinder} from '@schukai/monster/source/data/pathfinder.mjs';
new Pathfinder({
    a: {
        b: {
            f: [
                {
                    g: false,
                }
            ],
        }
    }
}).getVia("a.b.f.0.g"); // ↦ false

The Pathfinder class is used to access a specific path in a data object. The path is defined as a string. The path is separated by a dot. The path can also be an array of strings. The path can also be a combination of both.

import {Pathfinder} from '@schukai/monster/source/data/pathfinder.mjs';
new Pathfinder({
    a: {
        b: {
            f: [
                {
                    g: false,
                }
            ],
        }
    }
}).getVia(["a", "b", "f", 0, "g"]); // ↦ false

Transformer

The Transformer class is used to transform data. The transformation is defined as a string.

import {Transformer} from '@schukai/monster/source/data/transformer.mjs';

const transformer = new Transformer("tolower")
console.log(transformer.run("HELLO"))
// ↦ hello

The following transformations are available:

command	parameter	alias	description
`call`	function:param1:param2:…		Calling a callback function. The function can be defined in three places: either globally, in the context `addCallback` or in the passed object
`concat`	path or static:path or static:…		This function concatenates the values of the passed paths. If no value in the path is found, the path is used as a static value.
`contains`			Checks if an array or string contains a value (since 3.17)
`currency`	maximumFractionDigits:roundingIncrement	money	Convert a currency and amount to a local string (since 3.17)
`date`			Convert a date string to a localized date string (since 3.16)
`datetime`			Convert a date string to a localized date-time string (since 3.17)
`day`			Returns the day of a date (since 3.16)
`debug`			The passed value is output (console) and returned
`default`	value:type	??	If the value is undefined the first argument is returned, otherwise the value. The third optional parameter specifies the desired type. If no type is specified, string is used. Valid types are bool, string, int, float, undefined and object. An object default value must be specified as a base64 encoded json string. (since 1.12)
`element-by-id`		plain	All HTML tags are removed (*)
`empty`			Return empty String ""
`equals`	value		Compare the comparison value with the specified value and return true if they match.
`first-key`	default		Can be applied to objects and returns the value of the first key. All keys of the object are fetched and sorted. (since 1.23)
`from-base64`		atob	Converts the value from base64
`fromjson`			Type conversion from a JSON string (since 1.12)
`has-entries`		hasentries	Checks whether an array or an object has elements. (since 3.17)
`hours`		hour	Returns the hours of a date (since 3.16)
`if`	statement1:statement2	?	Is the ternary operator, the first parameter is the valid statement, the second is the false part. To use the current value in the queue, you can set the value keyword. On the other hand, if you want to have the static string “value”, you have to put one backslash \ in front of it and write value. the follow values are true: ‘on’, true, ’true’. If you want to have a space, you also have to write \ in front of the space.
`index`	key:default	property, key	Fetches a value from an object, an array, a map or a set
`is-array`		isarray	Checks if the value is a array (since 3.17)
`is-float`		isfloat	Checks if the value is a float (since 3.17)
`is-null`		isnull	Checks if the value is null (since 3.17)
`is-number`		isnumber	Checks if the value is a number (since 3.17)
`is-object`		isobject	Checks if the value is a object (since 3.17)
`is-set`		isset	Checks if the value is undefined and not null (since 3.17)
`is-undefined`		isundefined	Checks if the value is undefined (since 3.17)
`last-key`	default		Can be applied to objects and returns the value of the last key. All keys of the object are fetched and sorted. (since 1.23)
`length`		count	Length of the string or entries of an array or object
`map`	key:value:key:value….		Map a value with an existing mapping (since 3.16)
`minutes`		minute	Returns the minutes of a date (since 3.16)
`month`			Returns the month of a date (since 3.16)
`nop`			Do nothing
`not`			Converts a bolian value into the opposite one (since 3.17)
`nth-key`	index:default		Can be applied to objects and returns the value of the nth key. All keys of the object are fetched and sorted. (since 1.23)
`nth-last-key`	index:default		Can be applied to objects and returns the value of the nth key from behind. All keys of the object are fetched and sorted. (since 1.23)
`path-exists`	path		Check if the specified path is available in the value (since 1.24)
`path`	path		The access to an object is done via a Pathfinder object
`plaintext`		plain	All HTML tags are removed (*)
`prefix`	text		Adds a prefix
`rawurlencode`			URL coding
`seconds`		second	Returns the seconds of a date (since 3.16)
`static`		none	The Arguments value is used and passed to the value. Special characters \ and : can be quotet by a preceding .
`substring`	start:length		Returns a substring
`suffix`	text		Adds a suffix
`time`			Convert a date string to a localized time string (since 3.16)
`timestamp`			Convert a date string to a time stamp (since 3.16)
`to-base64`		base64, btob	Converts the value to base64
`tointeger`			Type conversion to an integer value
`tojson`			Type conversion to a JSON string (since 1.8)
`tolower`		strtolower, tolowercase	The input value is converted to lowercase letters
`tostring`			Type conversion to a string.
`toupper`		strtoupper, touppercase	The input value is converted to uppercase letters
`translation`	key:default	i18n	Translations can be applied. The translations must be stored in the DOM. (*) To use the current value as key the first parameter must be set to undefined.
`trim`			Remove spaces at the beginning and end
`ucfirst`			First character large
`ucwords`			Any word beginning large
`undefined`			Return undefined
`uniqid`			Creates a string with a unique value (**)
`weekday`			Returns the day of the week of a date (since 3.16)
`year`			Convert a date string to a year (since 3.16)

(*) for this functionality the extension jsdom must be loaded in the nodejs context.

 // polyfill
if (typeof window !== "object") {
    const {window} = new JSDOM('', {
        url: 'http://example.com/',
        pretendToBeVisual: true
    });

    [
        'self',
        'document',
        'Node',
        'Element',
        'HTMLElement',
        'DocumentFragment',
        'DOMParser',
        'XMLSerializer',
        'NodeFilter',
        'InputEvent',
        'CustomEvent'
    ].forEach(key => (global[key] = window[key]));
}

(**) for this command the crypt library is necessary in the nodejs context.

import * as Crypto from "@peculiar/webcrypto";

global['crypto'] = new Crypto.Crypto();

With the method setCallback(name, callback, context) you can define your own transformation functions.

The context parameter is optional and can be used to define the context in which the callback function is called. If no context is specified, the global context is used. In the pipe the name of the callback function is used by prefixing it with a call:.

import {Transformer} from '@schukai/monster/source/data/transformer.mjs';

const transformer = new Transformer("call:myCallback");
transformer.setCallback("myCallback", function (value) {
    return value + " world";
});
console.log(transformer.run("hello")); // hello world

Pipe

A Pipe is a class that is used to process data. The data is processed in a chain of functions. The functions are called in the order in which they were added to the pipe. The data is passed from one function to the next.

import {Pipe} from '@schukai/monster/source/data/pipe.mjs';
import {Pipe} from '@schukai/monster/source/data/pipe.mjs';

let obj = {
    a: {
        b: {
            c: {
                d: "world"
            }
        }
    }
}

console.log(new Pipe('path:a.b.c.d | toupper | prefix:Hello\\ ').run(obj));
// ↦ Hello WORLD

The Pipe class use the Pathfinder class to access the data and the Transformer class to transform the data.

Internationalisierung

The localization classes and functions support you in dealing with
translations and country-specific settings.

Locale

The Locale class is used to determine the language and country settings.

The method parseLocale() parses a locale string and returns a Locale object.

import {parseLocale} from '@schukai/monster/source/i18n/locale.mjs';
var locale = parseLocale("en-US");
console.log(locale.language); // "en"
console.log(locale.country); // "US"

The Method getLocaleOfDocument() returns the Locale object of the current document.

import {getLocaleOfDocument} from '@schukai/monster/source/dom/locale.mjs';
var locale = getLocaleOfDocument();
console.log(locale.language); // "en"
console.log(locale.country); // "US"

In an HTML document you can set the language and country with the lang attribute.

<html lang="en-US">

The method getLocaleOfDocument() checks for the lang attribute first and takes the browser locale as fallback. If no locale is available, English is taken.

Formatter & Translations

We need the Formatter and Translations class and the parseLocale() function to handle translations.
In the context of the DOM we can also use the getLocaleOfDocument() method.

import {Translations} from '@schukai/monster/source/i18n/translations.mjs';
import {Formatter} from '@schukai/monster/source/text/formatter.mjs';
import {parseLocale} from '@schukai/monster/source/i18n/locale.mjs';
import {getLocaleOfDocument} from '@schukai/monster/source/dom/locale.mjs';

Let’s start with the function parseLocale(). This function can create a Locale object from a string.

So we can create the corresponding Locale object from the string en_GB.

const locale = parseLocale('en_GB')
// ↦ Locale {}

If we move in the browser, so we can also use the function getLocaleOfDocument().
This function returns a locale object as a result.

This function looks if the HTML tag <html lang="en"> has a lang attribute.
If no locale is defined, the default value is assumed to be en.

We now need an object with the translations. For this, we use the Translations class.

We can either define the translations ourselves or load them via an API.

// define translations
const translation = new Translations(parseLocale('en-GB'));
translation.assignTranslations({
           text1: 'hello world!',
           text2: {
             'one': 'click once',
             'other': 'click ${n | tostring} times' // this is where the pipe comes in
           }
        });

// fetch from API
const translation = new Fetch('https://example.com/${language}.json').getTranslation('en-GB');
// ↦ https://example.com/en.json

If we now have a translation, we can now read the desired strings. For this
we use the method Translation.getText() or the method Translation.getPluralRuleText()
for texts with more than one number.

const message = translation.getText('text1');
// -> hello world

To translate texts with number references, enter the desired number.

let n=1;
const message1 = translation.getPluralRuleText('text2', n);
// -> click once

n=2
const message2 = translation.getPluralRuleText('text2', n);
// -> click ${n} times

To replace the placeholder now, the formatter is used.

const text = new Formatter({n}).format(message2); 
console.log(text)
// ↦ click 2 times

Finally, let’s take a look at the formatter class from the i18n module.

import {Formatter} from 
    "@schukai/monster/source/text/formatter.mjs";

A translation object can be passed directly to this class.

There is also the possibility to pass values in the format string.

// define translation
const translations = new Translations('en')
    .assignTranslations({
        // text with placeholder
        message: "${animal} has eaten the ${food}!"
    });

// without marker and inline values
new Formatter({}, translations).format("message::animal=dog::food=cake")
// ↦ dog has eaten the cake!

Translation

The Translation class encapsulates strings for a specific locale. It is used to translate strings into a specific language and country.

import {Translation} from '@schukai/monster/source/i18n/translation.mjs';

const translation = new Translation("en-US");
translation.set("hello", "Hello World!");

// plural rules
translation.setText("text6", {
    "zero": "There are no files on Disk.",
        "one": "There is one file on Disk.",
        "other": "There are files on Disk.",
    "default": "There are files on Disk."
});

If you want to assign a complete translation object, you can use the assignTranslations() method.

translation.assignTranslations({
    "hello": "Hello World!",
    "text6": {
        "zero": "There are no files on Disk.",
        "one": "There is one file on Disk.",
        "other": "There are files on Disk.",
        "default": "There are files on Disk."
    }
});

The getText() method returns the translated string for a given key.

translation.getText("hello"); // "Hello World!"

There are also methods for plural rules. The getPluralRuleText() method returns the translated string for a given key and a given number.

translation.getPluralRuleText("text6", 0); // "There are no files on Disk."
translation.getPluralRuleText("text6", 1); // "There is one file on Disk."
translation.getPluralRuleText("text6", 2); // "There are files on Disk."

Document Translation

First, you have to create a new script element with the data-monster-role="translations" and the type="application/json" attribute. The content of the element must be a JSON object.

<script type="application/json" data-monster-role="translations">
    {
        "key1": "translation1",
        "key2": {
            "other": "translation2"
        }
    }
</script>

Then you have to assign the translations to the document. This can be done with the assignTranslationsToDocument() method. This static method returns a promise. Than you can use the getDocumentTranslations() method to get the translations. Finally, you can use the getText() method to get the translated string.

import { Embed } from "@schukai/monster/source/i18n/providers/embed.mjs";
import { getDocumentTranslations } from "@schukai/monster/source/i18n/translations.mjs";

Embed.assignTranslationsToElement().then(() => {

    const translations = getDocumentTranslations();

    translations.getText('no-key','with-default')
    // ↦ with-default

    translations.getText('key1')
    // ↦ translation1

}).catch((e) => {
// ...
})

Provider

The abstract Provider class is used to provide translations to the application.

import {Provider} from '@schukai/monster/source/i18n/provider.mjs';

Fetch Provider

The FetchProvider class is used to provide translations from a remote server.

import {Fetch} from '@schukai/monster/source/i18n/providers/fetch.mjs';
const provider = new Fetch(
    'https://example.com/translations${language}.json',
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    }
);
provider.getTranslations('en-US').then(translations => {
    console.log(translations);
});

The URL can contain the placeholder ${language}, ${script}, ${region}, ${variants}, ${extlang} and ${privateUse}. The placeholders will be replaced with the language, country and locale of the current document.

import {Fetch} from '@schukai/monster/source/i18n/providers/fetch.mjs';

const provider = new Fetch(
    'https://example.com/translations/${language}/${region}.json',
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    }
);
provider.getTranslations('en-US').then(translations => {
    console.log(translations);
});

Embed Provider

The EmbedProvider class is used to provide translations from a local tag.

You must add a script tag with the type application/json. This Tag must contain a JSON object with the translations.

<script id="mmylocale" type="application/json">
{
        "key": "translation"
}
</script>

Now you can use the EmbedProvider to get the translations.

import {Embed} from '@schukai/monster/source/i18n/providers/embed.mjs';

const provider = new Embed('mmylocale');
provider.getTranslations('en-US').then(translations => {
    console.log(translations);
});

DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like structure, where each node in the tree represents an element, attribute, or text content in the document.

JavaScript provides a set of functions and classes for working with the DOM, including methods for creating, modifying, and querying elements, as well as handling events.

JavaScript’s DOM functions and classes can be divided into several categories:

Document: this includes the Document object, which represents the entire HTML or XML document and provides methods for manipulating the structure and content of the document.
Element: This includes classes such as HTMLElement, which represent an HTML element and provide methods for manipulating the attributes, content, and style of the element.
Event: This includes classes such as Event and EventTarget, which provide methods for processing and responding to events such as clicks, mouse movements, and keystrokes.
Node: This includes classes such as Node, which represent a node in the DOM tree and provide methods for processing the node’s parent and child nodes.
Selector: These include functions such as document.getElementById(), document.querySelector(), and document.querySelectorAll(), which are used to select elements from the DOM by their ID, class, or tag name.

By using these functions and classes, developers can create dynamic and interactive web pages and develop a variety of web applications.

In this section, we will delve deeper into the functions and classes provided by Monster and provide examples of their usage for manipulating the DOM and handling events.

Monster’s updater uses a DOM-based approach. The configuration and the template system are valid and parsable HTML.

The configuration is done via some special attributes with a data-monster- prefix.

Code is always the most informative. So let’s take a look at a complete example right away.

// The first thing to do is to include the Updater class.
import {Updater} from 'https://cdn.skypack.dev/@schukai/[email protected]/source/dom/updater.js';

// Now we prepare the html document.
// This is done here via script, but can also be inserted into the document as pure html. 
// To do this, simply insert the tag <h1 data-monster-replace="path:headline"></h1>.
const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace','path:headline')
body.appendChild(headline);

// the data structure
let obj = {
    headline: "Go!",
};

// Now comes the real magic. we pass the updater the parent HTMLElement
// and the desired data structure.
const updater = new Updater(body, obj);

// now we get the used data structure. why can't we take the original structure? 
// the updater puts a proxy over the data structure and thus allows to monitor changes.
// We would not see changes to the original object.
const subject = updater.getSubject();

// now start the updater
updater.run();

// Now you can change the data structure and the HTML will follow these changes.
// to illustrate, let's put the change into a timer call.
setTimeout(function(){
    console.log(obj);
    subject['headline'] = "Hello!"

},1000);

We have seen how we can change the content of an htm element. now let’s look at what options are available.

Replace

The simplest manipulation is to replace the content of a HTMLElement.
To do this, simply use the data-monster-replace attribute (see example).

The syntax is quite simple. The result of the attribute pipe is inserted as content of the
HTMLElement. For the processing the Pipe and Transformer class
is used.

If, for example, you have an object x with the structure listed below and want to insert the value of the key b, you write: path:a.b.

The pipe can then be used to apply operators. For example, tolower can be used to convert everything to lowercase.

let x = {
   a: {
      b: "EXAMPLE"
   }
}

this is how it looks as an attribute:

<div data-monster-replace="static:HELLO | tolower"></div>

The result is then the following html:

<div data-monster-replace="static:hello">hello</div>

A full example looks like this:

import {Updater} from 'https://cdn.skypack.dev/@schukai/[email protected]/source/dom/updater.js';
const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace','static:hello')
body.appendChild(headline);
// result in ↦ <div data-monster-replace="static:hello"></div>

new Updater(body).run();

Attributes

Attributes can be added via the data-monster-attributes attribute. The syntax is attribute name followed by
a space and the desired pipe definition.

<div data-monster-attributes="id static:myid">hello</div>

The result is then the following html:

<div id="myid" data-monster-attributes="id static:myid">hello</div>

Multiple attributes can be separated by commas.

<div data-monster-attributes="id static:myid, class static:myclass">hello</div>

Remove

The data-monster-remove attribute can be used to remove html elements. it is important to
note that this cannot be undone. Once removed, nodes will not be reinserted.

This tag is removed via the updater

<div data-monster-remove></div>

Insert

The strongest feature is adding elements to a node.

For this feature you need a template and the data-monster-insert attribute.

The syntax of the attribute is first an id followed by a space. This is then followed by the pipe command.

<ol data-monster-insert="myid path:a"></ol>

Furthermore, you need a template. The template must have the same string as id.

<template id="myid">
   <li data-monster-replace="path:myid | index:id | tostring | prefix:x"></li>
</template>

In this template, we define the structure of the new elements. In this case, the id is taken
from the dataset index:id, converted to a string tostring, and an x is placed in front of it prefix:x.

The values for the corresponding data must be available as an array.

let obj = {
    a: [
        {"id": 1},
        {"id": 2},
        {"id": 3},
        {"id": 4}
    ]
};

Below we have a complete example. Instead of specifying the template <template /> in HTML, it is constructed via
javascript document.createElement('template'). But it is essentially the same.

const body = document.querySelector('body');
const li = document.createElement('li');
li.innerHTML="-/-";
li.setAttribute('data-monster-replace','path:myid | index:id | tostring | prefix:x');

const template = document.createElement('template');
template.setAttribute('id','myid');
template.content.appendChild(li);

body.appendChild(template);

const list = document.createElement('ul');
list.setAttribute('data-monster-insert', 'myid path:a')

body.appendChild(list);

let obj = {
    a: [
        {"id": 1},
        {"id": 2},
        {"id": 3},
        {"id": 4}
    ]
};

const updater = new Updater(body, obj)
updater.run();

The result will be

<ul data-monster-insert="myid path:a">
  <li data-monster-replace="path:a.0 | index:id | tostring | prefix:x" data-monster-insert-reference="myid-0">x1</li>
  <li data-monster-replace="path:a.1 | index:id | tostring | prefix:x" data-monster-insert-reference="myid-1">x2</li>
  <li data-monster-replace="path:a.2 | index:id | tostring | prefix:x" data-monster-insert-reference="myid-2">x3</li>
  <li data-monster-replace="path:a.3 | index:id | tostring | prefix:x" data-monster-insert-reference="myid-3">x4</li>
</ul>

You can easily add and delete values to the array. The DOM will be adjusted accordingly.
The attribute data-monster-insert-reference identifies if the entry already exists.

Form Handling

Forms can be bound to a structure just like other structures via the updater class.

Suppose we have an html form with some controls.

<div>
    <form id="form1">
        <input type="checkbox" name="checkbox">
        <input type="text" name="text">
        <input type="radio" name="radio">

        <select name="select">
            <option>value1</option>
            <option>value2</option>
        </select>

        <textarea name="textarea">
        </textarea>

        <input type="button" name="button">

    </form>
</div>

A new updater is created in this case via the following call.

const updater = new Updater(document.getElementById('form1'));

With the method Updater.getSubject() you can get the structure of the updater. If you want to use an already defined structure, you can pass it to the updater as a second parameter.

let subject =  updater.getSubject();
console.log(subject);

Now we want a click on the checkbox to be mapped in the data structure.

To do this we need to extend the html with the data-monster-bind attribute.

The values or states of controls are mapped to the data structure via this binding.

<div>
    <form id="form1">
        <!-- data-monster-bind added -->
        <input type="checkbox" name="checkbox" data-monster-bind="path:state">
    </form>
</div>

In this case the status of the checkbox is mapped to the key state. If the checkbox is selected the field state contains the value on , otherwise state is undefined.

If you want to use another value instead of on, you can set the attribute value.

<input type="checkbox" name="checkbox" value="checked" data-monster-bind="path:state">

To see the magic the handling must still be switched on.

updater.enableEventProcessing()

Web Component

Web Components are a set of technologies that allow developers to create custom, reusable elements for use in web pages and web applications. These elements, known as Custom Elements, can be created using JavaScript, HTML, and CSS and are fully-featured and can be used just like any other standard HTML element.

Web Components are a key aspect of web development, as they enable developers to create reusable, modular code that can be easily shared and integrated with other projects. Additionally, because Web Components are part of the web platform and not tied to a specific framework or library, they are highly portable and can be used in a wide variety of environments. Overall, Web Components provide a powerful and flexible way to build web applications and create custom, reusable elements for web pages.

Create your own web component

This section is about how to create your own
Web Component.

Using classes and functions from Monster.

First, we create a class derived from CustomControl. The parent class
CustomControl already implements some functions that will make life in the following
easier.

class Button extends CustomControl {
}

The next step determines which tag the control should get in the HTML.

class Button extends CustomControl {
    static getTag() {
        return "monster-button";
        
    }
}

To be able to configure the control later, we have to create the possibility,
to be able to create options. We can use the structures of the class
CustomControl and only need to create a separate property default.

class Button extends CustomControl {

    // ..... other implementations
    
    get defaults() {
        return Object.assign({}, super.defaults, {})
    }

}

The templates of the control are also defined via this structure. In this way one can the control with a standard and give the user of the control the possibility to adapt the templates. Customize the templates.

So, now let’s get to work on the appearance of the control and create a template for it. We want the button to use a simple HTML5 button.

<button>Hello!</button>

The main template of the button is maintained via the templates.main option.

So, we have to insert the HTML into the default structure introduced above. We can
specify the HTML directly here.

return Object.assign({}, super.defaults, {
    templates: {
        main: `<button>Hello!</button>`
    },
})

With templateMapping we can map key values to the HTML template.

return Object.assign({}, super.defaults, {
    templateMapping: {
        a: "b"
    },
})

To maintain an overview of larger templates, you can alternatively
template into a function and only call up the function here.

return Object.assign({}, super.defaults, {
    templates: {
        main: getTemplate()
    },
})

If we now insert the HTML tag <monster-button></monster-button> into an HTML file we get so far so unspectacular a button.

Now comes the magic. In the DOM there are two important methods that are called when a control is included and removed. When a control is removed.

If a control is hooked into the DOM, the method
connectedCallback is called.

When a control is removed from the DOM, on the other hand, the method disconnectedCallback is called

We implement both methods in our new class.

class Button extends CustomControl {

    // ..... other implementations

    connectedCallback() {
        super.connectedCallback();
    }

    disconnectedCallback() {
        super.disconnectedCallback();
    }
}

Within these two methods, we can now initialize structures or add and remove event handlers. Adding and removing event handlers.

The CustomControl has two other important methods that can be overridden to initialize, they can be overridden to initialize the control. These two methods have no direct method name, but are hidden behind a symbol key. symbol key.

import {
    assembleMethodSymbol,
    initMethodSymbol,
} from "@schukai/monster/dist/modules/dom/customelement.js";

class Button extends CustomControl {

    // ..... other implementations

    [initMethodSymbol]() {
        super[initMethodSymbol]();
    }

    [assembleMethodSymbol]() {
        super[assembleMethodSymbol]();
    }
}

The method initMethodSymbol is called directly from the constructor and is used for one-time initialization of internal structures. internal structures.

The method assembleMethodSymbol is called the first time the control is included in the
DOM. If the control is removed and re-included, the assembleMethodSymbol method is called. assembleMethodSymbol` is not called again.

Configurate a Monster Control

Many of the components of the Monster Control can be configured. Components are created either by a tag in the HTML code or by the document.createElement method.

Example

The following example shows how to configure the Monster Control.

// Create a new Monster Control
var monster = document.createElement('monster-control');

Configuration

Mittels JavaScript können die Monster Controls über die Methode setOption konfiguriert werden. Dazu muss der Name der Option und der Wert übergeben werden.

monster.setOption('optionName', 'optionValue');

A list of available options can be found in the respective documentation of the component or can be read out using the default property.

const control = document.createElement('monster-control');
console.log(control.default);

There are three ways to configure a Monster Control via HTML.

JSON via an attribute

You can simply pass the JSON as a string to the data-monster-options attribute.

<monster-control data-monster-options='{"optionName": "optionValue"}'></monster-control>

If the JSON is too long or contains special characters, it can be converted to a data URL.

new Monster.Types.DataUrl(btoa(JSON.stringify({
    "optionName": "optionValue"
})),'application/json',true).toString()

JSON via a script tag

But the preferred way is to use a script tag.

<script id="id-for-this-config" type="application/json">
    {
        "optionName": "optionValue"
    }
</script>

<monster-control data-monster-options-selector="#id-for-this-config"></monster-control>

Options via attributes

Some components have a special attribute for some options. Read the documentation of the component for more information.

<monster-control data-monster-component-option="optionValue"></monster-control>

Form component

Web forms are a way for users to enter and submit data on a web page. They are created using HTML and can include a variety of input elements such as text fields, checkboxes, radio buttons, and more.

Web forms are a crucial aspect of many websites, as they allow users to interact with the site and provide information such as login credentials, contact information, and more.

Create form

Usage

The Form component allows the user to create a form and in interaction with a datasource to change data.

// create element
const form = document.createElement('monster-form');

Input controls

A form needs input fields. These can be easily defined within the tag. Either via Javascript directly or via the markup.

const input = document.createElement('input')
input.setAttribute('name','field');
form.appendChild(input);

via markup

<monster-form>
    <input name="field">
</monster-form>

The formula field ➊ are included as slotted elements in the shadow root ➋.

Datasource

One of the more interesting features of the form is the ability to connect the form to a data source. A datasource has a simple API to read and write an object (see Monster Framework under Datasources).

In this example we use a RestAPI datasource, but other datasources work as well. The example url httpbin.org is a service that provides a simple api with data. This is for this example only. You can of course specify your own api here.

const datasource =  new RestAPI({
  url: 'https://httpbin.org/get'
},{
  url: 'https://httpbin.org/post'
});
form.setOption('datasource', datasource)

In order to see the data as a value in the input field, we must specify the attribute data-monster-attributes.

const input = document.createElement('input')
input.setAttribute('name','field');
input.setAttribute('data-monster-attributes','value path:headers.Host');
form.appendChild(input);

Now we have to report the data back to the datasource. For this we use the attribute data-monster-bind. In this example we write the value in the same field, but we can also choose another field if for example the POST api has a different structure.

input.setAttribute('data-monster-bind','path:headers.Host');

Actions

What is a form without action? To be able to send the changed data we can add a button.

const button = document.createElement('monster-state-button');
// let's give the button a text
button.setOption('labels.button','click!')
// this attribute ensures that the form sets an action handler in the button.
button.setAttribute('data-monster-datasource-handler','write')

button.setOption('actions.click', undefined);

form.appendChild(button);

If we now click on the button, the modified dataset will be sent to the url previously specified in the RestAPI datasource.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

#select1::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.

Custom button

Usage

The button control encapsulates a button and serves as a basis for derived controls.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM
document.getElementById('body').appendChild(button);

<monster-button></monster-button>

Slotted Button

The text of the button can be defined either by the option labels.button.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM
document.getElementById('body').appendChild(button);

// Label
button.setOption('labels.button','My Button');

Or by a slot.

<monster-button>My Button</monster-button>

Action

Standard HTML buttons can listen to different events. Since the standard button sits in a shadowRoot the click event is accessible via an option. The component button uses a callback to listen for click events.

To do this, you must pass a callback to the actions.click option.

const button = document.querySelector('monster-button');
button.setOption('actions.click',(event)=>{
  console.log('clicked!');
});

State-Button

The status button is a special form of the button and has an icon to display the status.

You can also define your own statuses. these must be specified in the options.

// create element
const button = document.createElement('monster-state-button');

// insert element into the DOM
document.getElementById('body').appendChild(button);

// Label
button.setOption('labels.button','My Button');

// set state: successful, activity or failed
button.setState('successful');

Or by a slot.

<monster-state-button>My Button</monster-state-button>

Layout

The button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-button::part(button) {
    background-color: white;
}

The color scheme of the button can be set using CSS class via the options. You should always use a light color scheme for the status button, so that the icon is the icon is clearly visible. When using the standard design, you should always use the Outline variant should always be used.

const button = document.querySelector('monster-button');
button.setOption('classes.button','monster-button-outline-secondary');

if you want to use the standard classes, you have to include the properties, this can be done for example with postcss.

import  "@schukai/component-style/source/style/color.pcss";
import  "@schukai/component-style/source/style/theme.pcss";
import  "@schukai/component-style/source/style/property.pcss";

The individual parts and slots are shown in the following picture.

Popper button

Usage

The PopperButton component enables the display of a form or other content in a pop-up window.

// create element
const button = document.createElement('monster-popper-button');
// set label
button.setOption('labels.button', 'click me!');

// insert element into the DOM
document.getElementById('body').appendChild(button);

Layout

The popper-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-confirm-button::part(popper) {
    background-color: white;
}

Confirm button

Usage

The ConfirmButton component enables the display of a confirmation prompt before the final execution of an action.

// create element
const button = document.createElement('monster-confirm-button');
// set label
button.setOption('labels.button', 'click me!');

// insert element into the DOM
document.getElementById('body').appendChild(button);

Add confirm action

The confirm button can be given a function via the actions.confirm option.

button.setOption('actions.confirm', function (event) {
    console.log('confirm');
    button.hideDialog();
});

Add confirm action with state

The state is realized via a process queue.

button.setOption('actions.confirm', function (event) {

    const self = this;
    new Processing(() => {
        self.setState('activity'); // set state
        button.setOption('disabled', true);
    }, 2000, () => { // delay 2000 milliseconds 
        button.hideDialog();
    }).run().then(() => {
        button.setOption('disabled', undefined); // remove state
    });

});

Layout

The confirm-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-confirm-button::part(popper) {
    background-color: white;
}

The nested parts can each be addressed via the part name and the subpart name. So the part button is addressable from the confirm button via confirm-button.

monster-confirm-button::part(confirm-button) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

State button

Usage

The StateButton button can be used to display a button with a state. The state is displayed when the method setState() is called. The state is hidden when the method removeState() is called.

// create element
const button = document.createElement('monster-state-button');
// set label
button.setOption('labels.button', 'click me!');

Set State

The state can be set via the method setState(). The sate is a string defined in the option. Currently, the following states are defined: activity, successful and failed. More states can be defined in the option.

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity');

The second parameter of the method setState() can be used to define a timeout after which the state is removed. If the timeout is not set, the state is not removed automatically.

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity', 1000);

In this example, the state is removed after 1000 milliseconds.

Remove State

The state can be removed via the method removeState().

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity');
// remove state
button.removeState();

Layout

The state-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

Searchable select

Usage

Select component allows user to pick any amount of option from the given data:

// create element
const select = document.createElement('monster-select');

// set multiselect
select.setOption('type', 'checkbox');

// set options
select.setOption('options', [
    {
        value: 'en', label: 'United Kingdom &lt;img width=20
        src = "https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/gb.svg" &gt; '},
    {
        value: 'se', label: 'Sverige &lt;img width=20
        src = "https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/se.svg" &gt; '},
    {
        value: 'de', label: 'Deutschland &lt;img width=20
        src = "https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/de.svg" &gt; '}
]);

// insert element into the DOM
document.getElementById('body').appendChild(select);

Single select

Radios are used for the single selection.

select.setOption('type', 'radio');

Multiselect

Checkboxes are used for multiple selection.

select.setOption('type', 'checkbox');

Import data

The options can be imported from an object. The object can be read in either directly via Select.importOptions() or indirectly via a URL. In the example, a json file is imported via https://monsterjs.org/assets/world.json`.

select.setOption('url', 'https://monsterjs.org/assets/world.json')

Alternatively, the data can also be imported from an object.

select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

The mapping of the data to the options is done using the values defined in the mappings key.

select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

If you want to specify a deeper structure, you can do so via selector`.

{
    a: {
        b: {
            c: [
                ....
        ]
        }
    }
}

select.setOption('mapping.selector', 'a.b.c')

It is also possible to filter values. This is done via the filter parameter. Further details on the structure of the map can be found in the Monster documentation.

There is also an example.

select.setOption('mapping.filter', function (value, key) {
    return (value['id'] >= 20) ? true : false
})

Options via DIV elements

The options can also be defined via HTML. The following example shows how to define the options. Important is the monster-value attribute. This is used to define the value of the option. The label is defined by the content of the div.


<monster-select>
    <div monster-value="value1">label-1</div>
    <div monster-value="value2">label-2</div>
    <div monster-value="value3">label-3</div>
</monster-select>

Display selected options

There are two predefined templates for displaying the selected options. The first is the default template.

import {getSelectionTemplate} from '@schukai/monster/source/dom/select.mjs';

select.setOption('templateMapping.selected', getSelectionTemplate())

Selection

The second is the summary template. This template is used to display the selected options in a summary. To configure the summary, the templateMapping.summary option can be used.

Summary

The template can be changed via the templateMapping.selected option should be filled with the template.

import {getSummaryTemplate} from '@schukai/monster/source/dom/select.mjs';

select.setOption('templateMapping.selected', getSummaryTemplate())

You can also define your own template.

select.setOption('templateMapping.selected', "<div>Selected: ...</div>")

Events

The following events are fired by the component.

I18n

The component can be translated into different languages. For this you simply have to translate the corresponding labels. This can be done using the Select.setOption() method.

select.setOption('labels', {
    'cannot-be-loaded': 'The data cannot be loaded',
    'no-options-available': 'No options available'
});

You can also use the translation function. Therefore, the component can be translated via the Select.updateI18n() methods.

const selects = document.querySelector('monster-select')
select.updateI18n();

To see the keys of the translations, you can look at the default values under the labels key.

selects.getOption('labels')
// ↦ { .... }

Plural rules are available for the selection text. These can be set via the labels.summary-text option.

In the following example, the locales are set via an embed provider. First the keys are defined:

<script type="application/json" data-monster-role="translations">
    {
        "summary-text": {
            "zero": "Non sono state selezionate voci",
            "one": ",<span class='monster-badge-primary-pill'>1</span> voce è stata selezionata",
            "other": "Sono state selezionate <span class='monster-badge-primary-pill'>${count}</span> voci"
        }
    }
</script>

The translations are then assigned to the component.

Embed.assignTranslationsToElement().then(() => {
  select.updateI18n();
});

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-select::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.

Searchable tree select

Usage

The TreeSelect control is derived from Select and therefore inherits all properties and functions. It extends the control by the display of hierarchical data.

const treeselect = document.createElement('monster-tree-select');

// URL
treeselect.setOption('url', 'https://monsterjs.org/assets/14-forms-treeselect-data.json');

// Multiselect
treeselect.setOption('type', 'checkbox');

// search for data in dataset
treeselect.setOption('mapping.selector', 'dataset.*');

// define label and key
treeselect.setOption('mapping.labelTemplate', '${localeLabel | index:en}');
treeselect.setOption('mapping.valueTemplate', '${cid | tostring }');

// wich field is the parent ID?
treeselect.setOption('mapping.parentTemplate', 'parentCID');
treeselect.setOption('mapping.idTemplate', 'cid');

// append
document.getElementById('container').appendChild(treeselect);

Events

The following events are fired by the component.

Layout

The tree select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

#tab::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.

Tabs

Usage

The Tabs component allows the user to switch between multiple contents based on a navigation bar. The text for the buttons is formed from the content of the divs. No tab is active.

// tabs        
const tabs = document.createElement('monster-tabs');

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this is tab 1';
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tabs.appendChild(tab2)

// append to document
document.getElementById('example-tzxoiPwe').appendChild(tabs);

<monster-tabs>
    <div>this is tab 1</div>
    <div>this is tab 2</div>
</monster-tabs>

Active Tab

To set a tab active, you need to give the desired div the css class active`.

// tabs        
const tabs = document.createElement('monster-tabs');

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this is tab 1';
// this tab should be active
tab1.classList.add('active')
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tabs.appendChild(tab2)

// append to document
document.getElementById('example').appendChild(tabs);

<monster-tabs>
  <div class=&quot;active&quot;>this is tab 1</div>
  <div>this is tab 2</div>
</monster-tabs>

Tabs with label and icon

To use an explicit text for the button, you can use the data-monster-button-label attribute. If you also want to specify an icon, the attribute data-monster-button-iocon` is available.

// tabs        
const tabs = document.createElement('monster-tabs');

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this is tab 1';
tab1.classList.add('active')
tab1.setAttribute('data-monster-button-label','FIRST');
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tab2.setAttribute('data-monster-button-label','SECOND');
tab2.setAttribute('data-monster-button-icon','https://monsterjs.org/monster.png');
tabs.appendChild(tab2)

// append to document
document.getElementById('example').appendChild(tabs);

<monster-tabs>
    <div class=&quot;active&quot; data-monster-button-label=&quot;FIRST&quot;>this is tab 1</div>
    <div data-monster-button-label=&quot;SECOND&quot; 
            data-monster-button-icon=&quot;https://monsterjs.org/monster.png&quot;>this is tab 2</div>
</monster-tabs>

Prefix and suffix

If you want to add content before or after the navigation buttons, you can do so using the start and end slots.

// tabs        
const tabs = document.createElement('monster-tabs');

// prefix
const prefix = document.createElement('div');
prefix.innerHTML='this is a <b>prefix</b>';
prefix.setAttribute('slot','start')
tabs.appendChild(prefix);
            
// suffix
const suffix = document.createElement('div');
suffix.innerHTML='this is a <b>suffix</b>';
suffix.setAttribute('slot','end')
tabs.appendChild(suffix);

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this is tab 1';
tab1.classList.add('active')
tab1.setAttribute('data-monster-button-label','FIRST');
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tab2.setAttribute('data-monster-button-label','SECOND');
tabs.appendChild(tab2)

// append to document
document.getElementById('example').appendChild(tabs);

<monster-tabs>
    <div class=&quot;active&quot; data-monster-button-label=&quot;FIRST&quot;>this is tab 1</div>
    <div data-monster-button-label=&quot;SECOND&quot;>this is tab 2</div>
    <div slot=&quot;start&quot;>this is a <b>prefix</b></div>
    <div slot=&quot;end&quot;>this is a <b>suffix</b></div>
</monster-tabs>

Remove tabs

Tabs can be removed from the DOM. To do this, the desired content must have the attribute data-monster-removable. If you add multiple tabs and there is no space for newer tabs, they will be moved to a popup. You can see this by the ⋮ sign.

// tabs        
const tabs = document.createElement('monster-tabs');

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this is tab 1';
tab1.classList.add('active')
tab1.setAttribute('data-monster-button-label','FIRST');
tab1.setAttribute('data-monster-removable','true');
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tab2.setAttribute('data-monster-button-label','SECOND');
tab2.setAttribute('data-monster-removable','true');
tabs.appendChild(tab2)

// append to document
document.getElementById('example').appendChild(tabs);

<monster-tabs>
    <div class=&quot;active&quot; 
         data-monster-button-label=&quot;FIRST&quot; 
         data-monster-removable=&quot;true&quot;>this is tab 1</div>
    <div data-monster-button-label=&quot;SECOND&quot; 
         data-monster-removable=&quot;true&quot;>this is tab 2</div>
</monster-tabs>

Fetch tab content

The content of a tab can also be fetched by specifying the attribute data-monster-url with the url of the desired content. The tab is loaded only once. If you want to load the tab fresh from the server for each show, you can specify the attribute data-monster-reload.

It is important to follow the CORS guidelines.

// tabs        
const tabs = document.createElement('monster-tabs');

// tab1
const tab1 = document.createElement('div');
tab1.innerHTML = 'this tab will be reloaded';
tab1.classList.add('active')
tab1.setAttribute('data-monster-button-label','FIRST');
tab1.setAttribute('data-monster-url','https://monsterjs.org/assets/15-forms-tabs-content1.html');
tabs.appendChild(tab1)

// tab2
const tab2 = document.createElement('div');
tab2.innerHTML = 'this is tab 2';
tab2.setAttribute('data-monster-button-label','SECOND');
tab2.setAttribute('data-monster-removable','true');
tabs.appendChild(tab2)

// append to document
document.getElementById('example').appendChild(tabs);

<monster-tabs>
    <div class=&quot;active&quot;
         data-monster-button-label=&quot;FIRST&quot;
         data-monster-url=&quot;https://monsterjs.org/assets/15-forms-tabs-content1.html&quot;>this tab will be reloaded</div>
    <div data-monster-button-label=&quot;SECOND&quot;
         data-monster-removable=&quot;true&quot;>this is tab 2</div>
</monster-tabs>

Events

The following events are fired by the component.

monster-fetched

Layout

The tabs control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

#select1::part(popper) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

Reload

Usage

The Reload component allows the user to reload a content via URL. The content is reloaded only when the element is in the viewport. The IntersectionObserver API is used.

Im Standard wird der Inhalt nur einmal geladen. Möchte man den Inhalt immer wieder neu Laden, so muss die Option data-monster-reload auf “always” gesetzt werden.

It is important to follow the CORS guidelines.

// reload element
const reload = document.createElement('monster-reload');

// loader content
const defaultContent = document.createElement('div');
defaultContent.setAttribute('data-monster-role','container');
defaultContent.innerHTML='load'
reload.appendChild(defaultContent);

// fetch follow url
reload.setAttribute('data-monster-url','https://monsterjs.org/assets/16-forms-reload-content.html')

// append element 
document.getElementById('example').appendChild(reload);

<monster-reload>
  <div data-monster-role="container">
    LOADER ...
  </div>
</monster-reload>

If the child element has the attribute data-monster-role="container", then the content is replaced with the fetched content.

Events

The following events are fired by the component.

monster-fetched

Layout

The tabs control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS.

By default, the Shadow DOM is disabled for this component. You can enable it by setting the option shadowMode: false, to open or closed.

Since the internals of the component are optionally encapsulated in a shadow tree, access is via css pseudo-element parts.

#reload::part(container) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

Message State button

Usage

The MessageStateButton button can be used to display a button with a message. The message is displayed when the method showMessage() is called. The message is hidden when the method hideMessage() is called.

// create element
const button = document.createElement('monster-message-state-button');
// set label
button.setOption('labels.button', 'click me!');

Set Message

The message can be set via the method setMessage(). The message can be a string or an HTML element.

// create element
const button = document.createElement('monster-message-state-button');
// set label
button.setOption('labels.button', 'click me!');
// set message
button.setMessage('This is a message');
// show message
button.showMessage();

Layout

The message-state-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-message-state-button::part(popper) {
    background-color: white;
}

The nested parts can each be addressed via the part name and the subpart name. So the part button is addressable from the confirm button via message-state-button.

monster-message-state-button::part(message-state-button) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

State component

The components in this component group are used to manage the state of a application.

State component

The state component is a simple state display component. It is used to display the current state of the application.

Usage

The status component is a simple graphical display that specifies a structure of elements. The aim of this component is to enable a uniform representation of such displays.

The component is composed of a visual, a heading and a text. Actions (buttons) can also be displayed.

import '@schukai/[email protected]/source/button.mjs';
import '@schukai/component-state/source/state.mjs';

// state element
const state = document.createElement('monster-state');
state.innerHTML = `  
<svg slot="visual" version="1.1" viewBox="0 0 612.41 583.39" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clipPath18"><path d="m0 500h500v-500h-500z"/></clipPath><clipPath id="clipPath26"><path d="m45.178 442.22h434.25v-377.14h-434.25z"/></clipPath><clipPath id="clipPath42"><path d="m204.22 467.91h26.586v-26.586h-26.586z"/></clipPath><clipPath id="clipPath58"><path d="m390.28 469.58h13.717v-13.718h-13.717z"/></clipPath><clipPath id="clipPath74"><path d="m145.82 434.05h18.382v-18.382h-18.382z"/></clipPath><clipPath id="clipPath90"><path d="m28.108 112.45h41.854v-41.854h-41.854z"/></clipPath><clipPath id="clipPath106"><path d="m422.16 453.67h53.968v-49.906h-53.968z"/></clipPath><clipPath id="clipPath122"><path d="m413.19 98.497h38.944v-40.498h-38.944z"/></clipPath><clipPath id="clipPath138"><path d="m37.65 477.47h50.732v-48.756h-50.732z"/></clipPath><clipPath id="clipPath154"><path d="m20.124 443.07h442.71v-328.26h-442.71z"/></clipPath><clipPath id="clipPath170"><path d="m40.299 424.66h403.77v-345.77h-403.77z"/></clipPath><clipPath id="clipPath186"><path d="m463.15 122.92h9v-9h-9z"/></clipPath><clipPath id="clipPath202"><path d="m255.28 473.64h9v-9h-9z"/></clipPath><clipPath id="clipPath218"><path d="m92.708 81.422h9.0005v-9h-9.0005z"/></clipPath><clipPath id="clipPath234"><path d="m377.74 61.499h7v-7h-7z"/></clipPath><clipPath id="clipPath250"><path d="m75.842 394h3v-3h-3z"/></clipPath><clipPath id="clipPath266"><path d="m386.17 443.78h10.81v-10.81h-10.81z"/></clipPath><clipPath id="clipPath282"><path d="m103.88 464.64h4.24v-4.24h-4.24z"/></clipPath><clipPath id="clipPath298"><path d="m442.27 473.16h3.604v-3.603h-3.604z"/></clipPath><clipPath id="clipPath314"><path d="m61.215 43.533h3.6033v-3.6033h-3.6033z"/></clipPath><clipPath id="clipPath330"><path d="m0 500h500v-500h-500z"/></clipPath><clipPath id="clipPath338"><path d="m89.761 362.35h386.54v-276.52h-386.54z"/></clipPath><clipPath id="clipPath362"><path d="m173.59 147.49h132.29v-71.271h-132.29z"/></clipPath><clipPath id="clipPath366"><path d="m173.59 147.49h132.29v-71.271h-132.29z"/></clipPath><clipPath id="clipPath422"><path d="m47.677 233.4h148.44v-79.857h-148.44z"/></clipPath><clipPath id="clipPath426"><path d="m47.677 233.4h148.44v-79.857h-148.44z"/></clipPath><clipPath id="clipPath482"><path d="m249.66 330.43h201.45v-217.56h-201.45z"/></clipPath><clipPath id="clipPath502"><path d="m261.96 317.99h160.2v-197.09h-160.2z"/></clipPath><clipPath id="clipPath522"><path d="m259.29 322.78h160.2v-197.09h-160.2z"/></clipPath><clipPath id="clipPath550"><path d="m292.72 320.3h68.297v-71.599h-68.297z"/></clipPath><clipPath id="clipPath570"><path d="m302.4 320.13h56.096v-16.961h-56.096z"/></clipPath><clipPath id="clipPath626"><path d="m348.24 363.49h91.426v-34.284h-91.426z"/></clipPath><clipPath id="clipPath658"><path d="m145.77 405.2h138.9v-208.72h-138.9z"/></clipPath><clipPath id="clipPath674"><path d="m158.11 405.2h126.57v-208.72h-126.57z"/></clipPath><clipPath id="clipPath694"><path d="m192.28 228.57h120.03v-32.083h-120.03z"/></clipPath><clipPath id="clipPath758"><path d="m262.8 344.9h126.58v-126.58h-126.58z"/></clipPath><clipPath id="clipPath774"><path d="m272.5 338.96h61.904v-61.904h-61.904z"/></clipPath><clipPath id="clipPath790"><path d="m260.8 346.9h130.58v-130.58h-130.58z"/></clipPath><clipPath id="clipPath822"><path d="m378.75 237.08h12.84v-12.369h-12.84z"/></clipPath><clipPath id="clipPath842"><path d="m381.24 233.61h67.907v-72.32h-67.907z"/></clipPath><clipPath id="clipPath882"><path d="m89.344 237.56h166.92v-133.24h-166.92z"/></clipPath><clipPath id="clipPath898"><path d="m89.344 237.56h143.94v-133.24h-143.94z"/></clipPath></defs><g transform="matrix(1.3333 0 0 -1.3333 -26.831 636.63)"><g clip-path="url(#clipPath18)"><g clip-path="url(#clipPath26)" opacity=".41"><g transform="translate(479.21 201.52)"><path d="m0 0c0.428 7.37 0.236 14.775-0.595 22.107-3.903 34.45-21.577 66.935-47.59 89.856-9.28 8.178-19.839 15.503-25.878 26.297-10.172 18.178-9.402 39.07-22.025 57.018-12.638 17.969-31.055 31.982-51.824 39.179-61.926 21.457-148.62-13.48-140.82-88.091 0.027-0.268 0.058-0.657 0.091-1.15 1.037-15.498-11.126-28.528-26.608-28.896-57.135-1.356-106.32-45.406-116.84-101.21-6.768-35.885 4.314-75.218 30.564-100.6 19.594-18.95 45.885-29.361 72.188-36.514 52.739-14.343 108.24-17.35 162.62-11.865 50.902 5.134 104.59 19.767 137.51 58.929 17.56 20.89 27.621 47.68 29.205 74.94" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath42)" opacity=".31"><g transform="translate(230.81 454.61)"><path d="m0 0c0-7.341-5.951-13.293-13.292-13.293-7.342 0-13.293 5.952-13.293 13.293 0 7.342 5.951 13.293 13.293 13.293 7.341 0 13.292-5.951 13.292-13.293" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath58)" opacity=".31"><g transform="translate(404 462.72)"><path d="m0 0c0-3.788-3.07-6.859-6.858-6.859s-6.86 3.071-6.86 6.859 3.072 6.858 6.86 6.858 6.858-3.07 6.858-6.858" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath74)" opacity=".31"><g transform="translate(164.21 424.86)"><path d="m0 0c0-5.076-4.115-9.19-9.19-9.19-5.077 0-9.191 4.114-9.191 9.19s4.114 9.191 9.191 9.191c5.075 0 9.19-4.115 9.19-9.191" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath90)" opacity=".31"><g transform="translate(69.961 91.524)"><path d="m0 0c0-11.558-9.37-20.927-20.927-20.927-11.558 0-20.927 9.369-20.927 20.927s9.369 20.928 20.927 20.928c11.557 0 20.927-9.37 20.927-20.928" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath106)" opacity=".47"><g transform="translate(473.51 418.05)"><path d="m0 0c5.966 11.621 1.381 25.877-10.239 31.842-11.62 5.966-33.95 5.526-39.915-6.094-5.966-11.621 11.918-21.593 19.211-32.43 10.171-15.113 24.977-4.938 30.943 6.682" fill="#ecf1f7"/></g></g><g clip-path="url(#clipPath122)" opacity=".47"><g transform="translate(422.7 60.898)"><path d="m0 0c8.408-5.429 19.624-3.013 25.052 5.395 5.427 8.407 6.783 25.464-1.624 30.892s-17.365-7.451-26.179-12.191c-12.292-6.61-5.656-18.668 2.751-24.096" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath138)" opacity=".47"><g transform="translate(79.536 471.37)"><path d="m0 0c-9.248 8.588-23.706 8.053-32.294-1.195-8.588-9.247-14.019-30.131-4.772-38.719 9.248-8.588 23.201 5.438 35.187 9.386 16.718 5.507 11.127 21.94 1.879 30.528" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath154)" opacity=".47"><g transform="translate(28.561 371.54)"><path d="m0 0c-8.244-17.898-10.496-38.532-6.54-57.822 4.65-22.678 18.769-40.101 13.87-64.294-2.984-14.736-3.731-28.387-5.244-42.967-3.107-29.941 16.332-56.322 40.448-70.567 19.586-11.571 42.549-15.912 65.069-15.602 20.267 0.277 40.5 4.02 60.139 9.052 18.927 4.85 37.432 11.241 57.271 9.224 16.499-1.676 31.36-8.81 46.726-14.129 36.685-12.698 81.124-14.489 114.67 4.842 21.528 12.407 36.597 32.555 43.281 54.218 5.341 17.311 6.018 33.501 2.015 51.174-4.111 18.147-11.05 36.44-8.895 55.348 1.502 13.175 7.528 25.893 6.424 39.108-0.734 8.78-4.6 17.019-9.327 24.454-17.262 27.149-46.166 45.326-76.74 55.341-28.773 9.426-58.446 16.251-88.402 13.983-61.936-4.688-74.562 5.15-137.86 18.688-40.863 8.74-86.572-22.416-110.48-58.508-2.439-3.681-4.58-7.543-6.423-11.543" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath170)" opacity=".81"><g transform="translate(71.173 343.64)"><path d="m0 0c-1.271-14.292 3.55-29.02-0.479-43.174-4.824-16.946-18.788-29.639-24.48-46.276-8.411-24.583-8.007-52.131 2.208-76.086 4.922-11.546 12.113-22.275 21.934-29.695 15.138-11.439 34.975-13.948 53.63-12.497 27.764 2.16 57.06 14.179 84.975 10.901 15.404-1.809 20.108-18.482 28.063-29.479 8.998-12.438 21.252-22.209 34.799-28.712 24.952-11.978 54.898-13.112 80.4-2.251 27.227 11.596 50.957 39.914 49.398 71.938-0.722 14.815-6.653 29.53-3.906 44.088 3.445 18.268 17.21 34.917 27.185 49.802 11.017 16.439 17.686 36.043 18.993 56.043 0.015 0.227 0.03 0.454 0.043 0.68 2.045 34.503-19.718 65.971-52.551 76.769 0 0-69.859 22.976-69.862 22.976-70.886 23.313-141.71 22.543-206.89-11.672-14.104-7.403-37.068-29.463-41.798-44.674-0.893-2.869-1.405-5.766-1.664-8.681" fill="#e1e2fe"/></g></g><g clip-path="url(#clipPath186)" opacity=".58"><g transform="translate(472.15 118.42)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g clip-path="url(#clipPath202)" opacity=".58"><g transform="translate(264.27 469.14)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g clip-path="url(#clipPath218)" opacity=".58"><g transform="translate(101.71 76.922)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g clip-path="url(#clipPath234)" opacity=".58"><g transform="translate(384.74 57.999)"><path d="m0 0c0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5 1.567 3.5 3.5 3.5 3.5-1.567 3.5-3.5" fill="#ef929c"/></g></g><g clip-path="url(#clipPath250)" opacity=".58"><g transform="translate(78.842 392.5)"><path d="m0 0c0-0.829-0.671-1.5-1.5-1.5-0.828 0-1.5 0.671-1.5 1.5s0.672 1.5 1.5 1.5c0.829 0 1.5-0.671 1.5-1.5" fill="#3e479b"/></g></g><g clip-path="url(#clipPath266)" opacity=".58"><g transform="translate(396.86 437.24)"><path d="m0 0c-0.623-2.919-3.494-4.779-6.413-4.156s-4.779 3.494-4.156 6.413c0.624 2.919 3.495 4.78 6.414 4.156 2.918-0.623 4.779-3.495 4.155-6.413" fill="#ef929c"/></g></g><g clip-path="url(#clipPath282)" opacity=".58"><g transform="translate(108.07 462.08)"><path d="m0 0c-0.244-1.145-1.37-1.875-2.515-1.63-1.145 0.244-1.874 1.371-1.63 2.515 0.245 1.145 1.371 1.874 2.515 1.63 1.145-0.244 1.875-1.37 1.63-2.515" fill="#ef929c"/></g></g><g clip-path="url(#clipPath298)" opacity=".58"><g transform="translate(445.83 470.98)"><path d="m0 0c-0.207-0.973-1.164-1.593-2.138-1.385-0.972 0.207-1.592 1.164-1.384 2.137 0.207 0.973 1.165 1.594 2.137 1.386 0.973-0.208 1.593-1.165 1.385-2.138" fill="#3e479b"/></g></g><g clip-path="url(#clipPath314)" opacity=".58"><g transform="translate(64.778 41.356)"><path d="m0 0c-0.208-0.973-1.165-1.593-2.138-1.386-0.972 0.208-1.592 1.165-1.385 2.138 0.208 0.974 1.165 1.594 2.138 1.386s1.593-1.165 1.385-2.138" fill="#3e479b"/></g></g></g><g clip-path="url(#clipPath330)"><g clip-path="url(#clipPath338)" opacity=".66"><g transform="translate(143.2 276.91)"><path d="m0 0c-16.422 1.254-28.719 15.583-27.465 32.005s15.583 28.719 32.005 27.465 28.719-15.583 27.465-32.005c-1.254-16.423-15.583-28.719-32.005-27.465m51.214 33.339-7.958 0.608c-0.609 5.993-2.511 11.642-5.449 16.638l6.057 5.198c3.068 2.633 3.421 7.254 0.788 10.321-2.633 3.068-7.254 3.421-10.322 0.789l-6.057-5.198c-4.492 3.662-9.787 6.4-15.618 7.912l0.608 7.958c0.307 4.031-2.711 7.548-6.742 7.855-4.031 0.309-7.548-2.71-7.855-6.741l-0.608-7.958c-5.993-0.609-11.641-2.512-16.638-5.449l-5.198 6.057c-2.633 3.067-7.254 3.421-10.322 0.788-3.067-2.633-3.42-7.254-0.788-10.322l5.198-6.057c-3.662-4.492-6.4-9.787-7.912-15.618l-7.958 0.608c-4.031 0.308-7.548-2.711-7.856-6.742-0.307-4.03 2.711-7.548 6.742-7.856l7.958-0.607c0.609-5.993 2.511-11.642 5.449-16.638l-6.057-5.197c-3.068-2.633-3.421-7.254-0.788-10.323 2.633-3.068 7.254-3.42 10.322-0.787l6.057 5.197c4.492-3.662 9.787-6.4 15.618-7.912l-0.608-7.958c-0.307-4.03 2.711-7.548 6.742-7.856 4.03-0.307 7.548 2.711 7.856 6.742l0.607 7.958c5.993 0.609 11.642 2.511 16.638 5.449l5.198-6.057c2.633-3.068 7.254-3.42 10.322-0.788 3.068 2.633 3.42 7.254 0.787 10.322l-5.197 6.056c3.662 4.493 6.4 9.788 7.912 15.619l7.958-0.608c4.031-0.307 7.548 2.711 7.856 6.741 0.307 4.032-2.711 7.549-6.742 7.856" fill="#fff"/></g><g transform="translate(354.27 143.95)"><path d="m0 0c-2.008 0-4.024-0.309-5.992-0.932-5.036-1.594-9.15-5.054-11.582-9.743-2.434-4.687-2.896-10.043-1.301-15.078 1.595-5.036 5.055-9.149 9.743-11.582 4.69-2.435 10.046-2.894 15.078-1.301 5.036 1.595 9.15 5.055 11.582 9.743 2.434 4.688 2.896 10.043 1.301 15.079s-5.055 9.149-9.743 11.582c-2.856 1.482-5.959 2.232-9.086 2.232m-0.048-41.568c-3.444 0-6.86 0.826-10.006 2.458-5.162 2.679-8.971 7.208-10.727 12.753s-1.247 11.441 1.431 16.604c2.68 5.162 7.208 8.972 12.753 10.728 5.546 1.756 11.441 1.247 16.605-1.432 5.162-2.68 8.972-7.209 10.728-12.753 1.756-5.545 1.247-11.442-1.432-16.604-2.68-5.163-7.208-8.972-12.753-10.728-2.167-0.687-4.389-1.026-6.599-1.026m4.392-5.583 1.93-6.099c0.331-1.044 1.048-1.896 2.02-2.4 0.972-0.505 2.081-0.6 3.126-0.27 1.044 0.331 1.896 1.048 2.401 2.02 0.505 0.971 0.6 2.082 0.27 3.126l-1.932 6.097 0.74 0.39c3.539 1.862 6.57 4.411 9.008 7.576l0.51 0.662 5.678-2.945c0.971-0.505 2.081-0.601 3.126-0.271 1.044 0.331 1.896 1.048 2.4 2.021 1.041 2.005 0.256 4.484-1.75 5.526l-5.678 2.947 0.248 0.798c1.186 3.816 1.526 7.761 1.012 11.726l-0.108 0.83 6.098 1.931c2.155 0.682 3.353 2.991 2.671 5.145-0.331 1.044-1.048 1.897-2.02 2.402-0.97 0.504-2.081 0.599-3.125 0.269l-6.098-1.932-0.39 0.741c-1.862 3.539-4.411 6.57-7.577 9.007l-0.663 0.51 2.947 5.678c1.041 2.006 0.256 4.485-1.75 5.526-2.008 1.044-4.486 0.256-5.526-1.75l-2.947-5.677-0.799 0.248c-3.815 1.185-7.76 1.523-11.726 1.011l-0.83-0.108-1.93 6.099c-0.33 1.044-1.048 1.896-2.02 2.4-0.972 0.505-2.079 0.601-3.126 0.271-2.154-0.683-3.352-2.992-2.671-5.147l1.932-6.097-0.74-0.389c-3.539-1.864-6.57-4.412-9.007-7.577l-0.51-0.664-5.679 2.948c-0.97 0.505-2.081 0.599-3.125 0.269-1.044-0.331-1.896-1.048-2.4-2.02-0.505-0.972-0.601-2.081-0.271-3.125 0.332-1.044 1.048-1.897 2.021-2.401l5.677-2.947-0.248-0.799c-1.186-3.815-1.526-7.76-1.012-11.725l0.108-0.83-6.098-1.931c-1.044-0.33-1.897-1.048-2.401-2.02-0.505-0.971-0.599-2.082-0.269-3.126 0.682-2.154 2.991-3.354 5.145-2.67l6.098 1.931 0.39-0.74c1.862-3.539 4.411-6.569 7.576-9.007l0.662-0.51-2.945-5.678c-0.505-0.972-0.601-2.081-0.271-3.125 0.331-1.044 1.048-1.897 2.021-2.401 2.005-1.042 4.485-0.255 5.526 1.75l2.947 5.677 0.799-0.248c3.815-1.186 7.763-1.523 11.725-1.012zm5.831-10.963c-0.964 0-1.921 0.231-2.802 0.688-1.445 0.75-2.513 2.019-3.005 3.572l-1.43 4.515c-3.695-0.377-7.366-0.059-10.938 0.943l-2.182-4.203c-1.549-2.984-5.239-4.152-8.223-2.603-1.447 0.75-2.513 2.018-3.005 3.572-0.492 1.553-0.35 3.204 0.401 4.651l2.181 4.203c-2.876 2.343-5.248 5.165-7.068 8.402l-4.514-1.43c-3.207-1.015-6.641 0.768-7.655 3.974-0.493 1.553-0.35 3.204 0.4 4.65 0.751 1.447 2.019 2.514 3.572 3.005l4.515 1.43c-0.376 3.694-0.06 7.366 0.943 10.939l-4.203 2.182c-1.446 0.75-2.513 2.019-3.005 3.572s-0.349 3.204 0.402 4.651c0.75 1.445 2.018 2.512 3.572 3.005 1.552 0.491 3.204 0.349 4.65-0.401l4.203-2.182c2.344 2.875 5.165 5.249 8.403 7.069l-1.43 4.514c-1.015 3.206 0.768 6.64 3.974 7.656 1.55 0.492 3.204 0.348 4.65-0.402 1.446-0.751 2.514-2.019 3.005-3.572l1.43-4.515c3.695 0.378 7.366 0.06 10.939-0.943l2.182 4.204c1.549 2.985 5.235 4.154 8.223 2.604 2.984-1.55 4.152-5.239 2.604-8.224l-2.182-4.202c2.876-2.345 5.249-5.166 7.069-8.403l4.514 1.429c1.554 0.492 3.204 0.35 4.651-0.4 1.446-0.751 2.512-2.02 3.005-3.573 1.014-3.206-0.768-6.64-3.974-7.656l-4.515-1.429c0.376-3.695 0.06-7.366-0.943-10.94l4.204-2.18c2.984-1.55 4.152-5.24 2.603-8.224-0.75-1.446-2.018-2.514-3.572-3.005-1.552-0.492-3.203-0.349-4.651 0.401l-4.202 2.181c-2.346-2.876-5.166-5.248-8.404-7.067l1.43-4.515c0.492-1.553 0.35-3.205-0.4-4.65-0.751-1.447-2.02-2.514-3.574-3.005-0.607-0.193-1.229-0.288-1.848-0.288" fill="#fff"/></g><g transform="translate(440.19 153.6)"><path d="m0 0h0.01zm-16.757 49.302c-5.761 0-11.345-1.844-16.045-5.352-11.895-8.878-14.35-25.78-5.472-37.677 8.878-11.895 25.779-14.347 37.676-5.471 5.762 4.301 9.505 10.588 10.538 17.704 1.035 7.116-0.765 14.209-5.066 19.972-4.301 5.762-10.588 9.505-17.704 10.539-1.313 0.19-2.624 0.285-3.927 0.285m0.093-55.835c-8.824 0-17.542 4.012-23.214 11.61-9.537 12.781-6.899 30.939 5.881 40.477 6.191 4.619 13.813 6.554 21.454 5.442 7.646-1.11 14.4-5.132 19.021-11.323 4.62-6.191 6.552-13.81 5.442-21.454-1.11-7.646-5.131-14.401-11.322-19.021-5.181-3.866-11.246-5.731-17.262-5.731m-26.288 2.012 0.611-0.571c3.956-3.702 8.572-6.449 13.718-8.167l0.793-0.264-1.194-8.222c-0.464-3.193 1.757-6.17 4.951-6.635 3.194-0.463 6.171 1.757 6.635 4.951l1.194 8.224 0.836 0.027c5.422 0.182 10.629 1.503 15.474 3.926l0.748 0.374 4.97-6.659c0.935-1.253 2.302-2.067 3.85-2.291 1.549-0.228 3.089 0.166 4.343 1.101 2.585 1.931 3.12 5.606 1.188 8.192l-4.969 6.659 0.572 0.611c3.701 3.955 6.449 8.571 8.167 13.718l0.264 0.793 8.222-1.194c3.198-0.461 6.169 1.758 6.635 4.951 0.463 3.193-1.758 6.17-4.952 6.635l-8.223 1.194-0.027 0.836c-0.182 5.423-1.503 10.629-3.926 15.474l-0.374 0.748 6.658 4.97c2.587 1.93 3.121 5.605 1.19 8.192-0.934 1.253-2.301 2.066-3.849 2.291-1.547 0.226-3.089-0.167-4.343-1.102h1e-3l-6.659-4.97-0.612 0.572c-3.956 3.703-8.572 6.45-13.717 8.167l-0.793 0.264 1.194 8.223c0.225 1.547-0.167 3.089-1.102 4.342s-2.302 2.067-3.849 2.292c-3.203 0.466-6.17-1.758-6.635-4.951l-1.194-8.223-0.836-0.027c-5.421-0.182-10.627-1.503-15.474-3.926l-0.748-0.374-4.971 6.658c-0.934 1.254-2.301 2.067-3.848 2.292-1.546 0.223-3.089-0.167-4.342-1.102-1.254-0.935-2.067-2.302-2.292-3.849-0.225-1.548 0.166-3.09 1.102-4.343l4.969-6.658-0.571-0.611c-3.703-3.956-6.45-8.573-8.167-13.718l-0.265-0.793-8.222 1.194c-1.545 0.222-3.089-0.168-4.342-1.102-1.253-0.935-2.067-2.302-2.292-3.849-0.464-3.194 1.758-6.171 4.951-6.635l8.223-1.194 0.027-0.836c0.182-5.421 1.503-10.627 3.927-15.475l0.374-0.748-6.66-4.969c-1.252-0.935-2.067-2.302-2.291-3.85-0.225-1.547 0.167-3.089 1.102-4.343 0.935-1.252 2.302-2.066 3.849-2.291 1.546-0.223 3.089 0.167 4.343 1.103zm19.725-25.92c-0.374 0-0.752 0.027-1.133 0.083-4.286 0.623-7.266 4.616-6.643 8.9l0.955 6.576c-4.841 1.728-9.221 4.335-13.042 7.763l-5.325-3.974c-1.682-1.255-3.749-1.78-5.825-1.477-2.076 0.3-3.91 1.392-5.165 3.074-2.59 3.471-1.874 8.401 1.596 10.991l5.326 3.974c-2.201 4.639-3.455 9.58-3.733 14.711l-6.575 0.956c-4.285 0.622-7.266 4.615-6.643 8.9 0.301 2.076 1.393 3.91 3.075 5.165 1.681 1.254 3.75 1.778 5.825 1.478l6.577-0.955c1.727 4.84 4.334 9.22 7.763 13.042l-3.975 5.324c-1.254 1.681-1.779 3.751-1.477 5.826 0.301 2.076 1.393 3.91 3.075 5.165 1.68 1.255 3.749 1.779 5.825 1.479 2.076-0.302 3.91-1.394 5.165-3.076l3.975-5.324c4.638 2.199 9.58 3.453 14.71 3.732l0.956 6.575c0.623 4.286 4.627 7.268 8.9 6.642 2.076-0.3 3.91-1.392 5.165-3.074 1.255-1.681 1.779-3.75 1.478-5.825l-0.956-6.577c4.841-1.727 9.221-4.334 13.042-7.763l5.326 3.975c3.467 2.589 8.399 1.875 10.991-1.598 2.59-3.47 1.873-8.4-1.598-10.99l-5.324-3.975c2.199-4.637 3.453-9.578 3.731-14.71l6.577-0.956c4.285-0.623 7.264-4.616 6.642-8.9-0.623-4.286-4.625-7.27-8.9-6.643l-6.576 0.955c-1.728-4.841-4.335-9.221-7.763-13.042l3.974-5.325c2.589-3.469 1.874-8.399-1.596-10.991-1.682-1.254-3.751-1.778-5.827-1.478-2.076 0.302-3.91 1.394-5.165 3.076l-3.974 5.324c-4.639-2.199-9.579-3.453-14.711-3.732l-0.956-6.576c-0.566-3.904-3.932-6.724-7.767-6.725" fill="#fff"/></g></g><g clip-path="url(#clipPath362)" opacity=".81"><g transform="translate(287.66 119.14)"><path d="m0 0h-20.542c-0.553 0-1 0.447-1 1s0.447 1 1 1h20.542c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(287.66 97.783)"><path d="m0 0h-20.542c-0.553 0-1 0.447-1 1s0.447 1 1 1h20.542c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(176.3 145.49)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-65.849c0-0.391 0.319-0.71 0.711-0.71h126.87c0.392 0 0.712 0.319 0.712 0.71v65.849c0 0.393-0.32 0.712-0.712 0.712zm126.87-69.271h-126.87c-1.495 0-2.711 1.215-2.711 2.71v65.849c0 1.495 1.216 2.712 2.711 2.712h126.87c1.495 0 2.712-1.217 2.712-2.712v-65.849c0-1.495-1.217-2.71-2.712-2.71" fill="#fff"/></g><g clip-path="url(#clipPath366)" opacity=".66"><g transform="translate(176.3 145.49)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-65.849c0-0.391 0.319-0.71 0.711-0.71h126.87c0.392 0 0.712 0.319 0.712 0.71v65.849c0 0.393-0.32 0.712-0.712 0.712zm126.87-69.271h-126.87c-1.495 0-2.711 1.215-2.711 2.71v65.849c0 1.495 1.216 2.712 2.711 2.712h126.87c1.495 0 2.712-1.217 2.712-2.712v-65.849c0-1.495-1.217-2.71-2.712-2.71" fill="#fff"/></g></g><g transform="translate(287.66 129.5)"><path d="m0 0h-97.889c-0.552 0-1 0.447-1 1s0.448 1 1 1h97.889c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(287.66 108.77)"><path d="m0 0h-97.889c-0.552 0-1 0.447-1 1s0.448 1 1 1h97.889c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(242.55 119.14)"><path d="m0 0h-52.776c-0.552 0-1 0.447-1 1s0.448 1 1 1h52.776c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(242.55 97.783)"><path d="m0 0h-52.776c-0.552 0-1 0.447-1 1s0.448 1 1 1h52.776c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(225.36 87.891)"><path d="m0 0h-35.592c-0.552 0-1 0.447-1 1s0.448 1 1 1h35.592c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g></g><g clip-path="url(#clipPath422)" opacity=".81"><g transform="translate(91.118 183.16)"><path d="m0 0h-23.088c-0.553 0-1 0.447-1 1s0.447 1 1 1h23.088c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(91.118 207.16)"><path d="m0 0h-23.088c-0.553 0-1 0.447-1 1s0.447 1 1 1h23.088c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(50.389 231.4)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-74.434c0-0.392 0.319-0.711 0.711-0.711h143.02c0.392 0 0.711 0.319 0.711 0.711v74.434c0 0.393-0.319 0.712-0.711 0.712zm143.02-77.857h-143.02c-1.495 0-2.711 1.216-2.711 2.711v74.434c0 1.495 1.216 2.712 2.711 2.712h143.02c1.495 0 2.711-1.217 2.711-2.712v-74.434c0-1.495-1.216-2.711-2.711-2.711" fill="#fff"/></g><g clip-path="url(#clipPath426)" opacity=".66"><g transform="translate(50.389 231.4)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-74.434c0-0.392 0.319-0.711 0.711-0.711h143.02c0.392 0 0.711 0.319 0.711 0.711v74.434c0 0.393-0.319 0.712-0.711 0.712zm143.02-77.857h-143.02c-1.495 0-2.711 1.216-2.711 2.711v74.434c0 1.495 1.216 2.712 2.711 2.712h143.02c1.495 0 2.711-1.217 2.711-2.712v-74.434c0-1.495-1.216-2.711-2.711-2.711" fill="#fff"/></g></g><g transform="translate(178.05 171.52)"><path d="m0 0h-110.02c-0.552 0-1 0.447-1 1s0.448 1 1 1h110.02c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(178.05 194.81)"><path d="m0 0h-110.02c-0.552 0-1 0.447-1 1s0.448 1 1 1h110.02c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(178.05 183.16)"><path d="m0 0h-59.316c-0.553 0-1 0.447-1 1s0.447 1 1 1h59.316c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(178.05 207.16)"><path d="m0 0h-59.316c-0.553 0-1 0.447-1 1s0.447 1 1 1h59.316c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(178.05 218.28)"><path d="m0 0h-40.003c-0.552 0-1 0.447-1 1s0.448 1 1 1h40.003c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g></g><g clip-path="url(#clipPath482)" opacity=".14"><g transform="translate(359.99 113.13)"><path d="m0 0-109.42 64.872c-0.879 0.522-1.17 1.657-0.648 2.537l88.33 148.98c0.521 0.879 1.656 1.17 2.536 0.648l109.42-64.873c0.88-0.521 1.17-1.657 0.648-2.537l-88.329-148.98c-0.521-0.878-1.657-1.168-2.537-0.647" fill="#3e479b"/></g></g><g transform="translate(357.14 119.1)"><path d="m0 0-109.42 64.873c-0.879 0.522-1.17 1.657-0.648 2.537l88.329 148.98c0.521 0.879 1.657 1.169 2.537 0.648l109.42-64.873c0.88-0.522 1.17-1.657 0.648-2.537l-88.329-148.98c-0.521-0.878-1.657-1.169-2.537-0.648" fill="#f7a9b4"/></g><g clip-path="url(#clipPath502)" opacity=".14"><g transform="translate(388.57 120.93)"><path d="m0 0-125.1 23.06c-1.005 0.185-1.67 1.15-1.484 2.156l31.396 170.33c0.186 1.006 1.152 1.671 2.157 1.485l125.1-23.059c1.005-0.185 1.67-1.151 1.485-2.156l-31.397-170.33c-0.185-1.006-1.151-1.671-2.156-1.485" fill="#3e479b"/></g></g><g transform="translate(387.72 125.38)"><path d="m0 0-128.74 23.73 32.068 173.97 128.74-23.73z" fill="#fff"/></g><g clip-path="url(#clipPath522)" opacity=".39"><g transform="translate(385.9 125.72)"><path d="m0 0-125.1 23.06c-1.005 0.185-1.67 1.15-1.484 2.156l31.396 170.33c0.186 1.006 1.151 1.671 2.157 1.485l125.1-23.059c1.006-0.185 1.671-1.151 1.486-2.156l-31.397-170.33c-0.185-1.006-1.151-1.671-2.156-1.485" fill="#f7a9b4"/></g></g><g transform="translate(400.31 278.86)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.621-0.802 1.164 0.101 0.543 0.615 0.901 1.165 0.802l31.315-5.772c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.508-0.819-0.982-0.819" fill="#fff"/></g><g transform="translate(398.46 268.86)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.622-0.802 1.165 0.101 0.542 0.616 0.901 1.165 0.802l31.315-5.773c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.508-0.819-0.982-0.819" fill="#fff"/></g><g transform="translate(396.46 257.98)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.621-0.802 1.164s0.614 0.901 1.165 0.802l31.315-5.772c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.509-0.819-0.982-0.819" fill="#fff"/></g><g clip-path="url(#clipPath550)" opacity=".14"><g transform="translate(348.01 248.74)"><path d="m0 0-53.652 9.89c-1.089 0.2-1.809 1.245-1.609 2.334l10.636 57.7c0.201 1.088 1.246 1.808 2.335 1.608l53.652-9.89c1.089-0.201 1.809-1.246 1.608-2.334l-10.636-57.701c-0.2-1.088-1.246-1.808-2.334-1.607" fill="#3e479b"/></g></g><g transform="translate(346.04 252.09)"><path d="m0 0-51.148 9.428c-1.089 0.201-1.809 1.246-1.609 2.335l10.07 54.628c0.201 1.088 1.247 1.808 2.334 1.608l51.149-9.429c1.089-0.2 1.808-1.245 1.608-2.334l-10.07-54.628c-0.2-1.088-1.245-1.809-2.334-1.608" fill="#599af2"/></g><g clip-path="url(#clipPath570)" opacity=".070007"><g transform="translate(357.49 303.17)"><path d="m0 0-55.091 10.155 0.961 5.213c0.194 1.056 1.209 1.755 2.266 1.56l51.333-9.462c1.018-0.188 1.692-1.166 1.505-2.184z" fill="#ecf1f7"/></g></g><g transform="translate(317.82 286.15)"><path d="m0 0c-0.388 0-0.781 0.035-1.176 0.108l-0.762 0.141c-4.05 0.746-6.739 4.649-5.993 8.7l1.924 10.439c0.151 0.815 0.939 1.355 1.747 1.203 0.816-0.15 1.354-0.932 1.204-1.747l-1.923-10.439c-0.448-2.424 1.161-4.759 3.584-5.206l0.763-0.141c1.885-0.35 3.699 0.903 4.046 2.788l4.871 26.422c0.359 1.944-0.931 3.818-2.876 4.177l-1.305 0.24c-2.072 0.381-4.053-0.99-4.435-3.054l-0.119-0.652c-0.152-0.815-0.943-1.353-1.747-1.203-0.815 0.15-1.354 0.932-1.204 1.746l0.12 0.653c0.682 3.692 4.24 6.142 7.928 5.46l1.305-0.24c3.571-0.658 5.942-4.099 5.284-7.67l-4.871-26.423c-0.575-3.116-3.304-5.302-6.365-5.302" fill="#3e479b"/></g><g transform="translate(323.02 308.34)"><path d="m0 0c-0.03 0-0.061 2e-3 -0.092 8e-3l-19.989 3.685c-0.272 0.05-0.451 0.31-0.401 0.582s0.307 0.455 0.583 0.401l19.989-3.684c0.271-0.05 0.451-0.311 0.401-0.583-0.045-0.241-0.255-0.409-0.491-0.409" fill="#fff"/></g><g transform="translate(384.14 205)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-95.683 17.637c-0.543 0.1-0.903 0.621-0.802 1.165 0.101 0.542 0.614 0.905 1.165 0.802l95.684-17.638c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g><g transform="translate(377.3 167.89)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-95.684 17.636c-0.543 0.1-0.903 0.621-0.802 1.165 0.1 0.542 0.615 0.907 1.165 0.802l95.685-17.637c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.509-0.818-0.982-0.818" fill="#fff"/></g><g transform="translate(330.27 195.75)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-45.232 8.337c-0.543 0.1-0.902 0.622-0.802 1.166 0.101 0.542 0.615 0.907 1.165 0.801l45.233-8.338c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.509-0.818-0.982-0.818" fill="#fff"/></g><g transform="translate(336.5 229.56)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-45.232 8.337c-0.543 0.1-0.902 0.622-0.802 1.165 0.101 0.542 0.616 0.9 1.165 0.801l45.233-8.337c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g><g transform="translate(380.75 186.59)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-43.096 7.944c-0.543 0.1-0.903 0.621-0.802 1.165 0.1 0.542 0.614 0.904 1.165 0.802l43.097-7.945c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g><g transform="translate(370.62 383.15)"><path d="m0 0h-53.181c-1.84 0-3.333 1.492-3.333 3.333v17.787c0 1.84 1.493 3.333 3.333 3.333h53.181c1.841 0 3.333-1.493 3.333-3.333v-17.787c0-1.841-1.492-3.333-3.333-3.333" fill="#599af2"/></g><g transform="translate(410.68 356.49)"><path d="m0 0h-74.39c-1.84 0-3.333 1.492-3.333 3.333v26.453c0 1.84 1.493 3.333 3.333 3.333h74.39c1.841 0 3.333-1.493 3.333-3.333v-26.453c0-1.841-1.492-3.333-3.333-3.333" fill="#f7a9b4"/></g><g transform="translate(352.77 363.49)"><path d="m0 0h82.375c2.489 0 4.525-2.036 4.525-4.525v-25.235c0-2.488-2.036-4.524-4.525-4.524h-82.375c-2.489 0-4.525 2.036-4.525 4.524v25.235c0 2.489 2.036 4.525 4.525 4.525" fill="#fff"/></g><g clip-path="url(#clipPath626)" opacity=".74"><g transform="translate(352.77 363.49)"><path d="m0 0h82.375c2.489 0 4.525-2.036 4.525-4.525v-25.235c0-2.488-2.036-4.524-4.525-4.524h-82.375c-2.489 0-4.525 2.036-4.525 4.524v25.235c0 2.489 2.036 4.525 4.525 4.525" fill="#6d6cd4"/></g></g><g transform="translate(410.65 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g><g transform="translate(394.26 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g><g transform="translate(378.99 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g><g transform="translate(152.38 405.2)"><path d="m0 0h127.64c2.571 0 4.655-2.084 4.655-4.655v-188c0-8.869-7.189-16.058-16.058-16.058h-88.627c-18.899 0-34.219 15.32-34.219 34.218v167.89c0 3.65 2.958 6.608 6.607 6.608" fill="#fff"/></g><g clip-path="url(#clipPath658)" opacity=".39"><g transform="translate(147.39 405.2)"><path d="m0 0h134.78c1.379 0 2.496-1.117 2.496-2.496v-190.91c0-8.456-6.855-15.31-15.311-15.31h-92.416c-17.219 0-31.178 13.958-31.178 31.176v175.92c0 0.897 0.728 1.625 1.625 1.625" fill="#6d6cd4"/></g></g><g clip-path="url(#clipPath674)" opacity=".39"><g transform="translate(159.21 405.2)"><path d="m0 0h123.49c1.09 0 1.973-0.884 1.973-1.974v-191.96c0-8.167-6.621-14.788-14.789-14.788h-81.122c-16.93 0-30.656 13.724-30.656 30.655v176.96c0 0.609 0.494 1.103 1.103 1.103" fill="#3e479b"/></g></g><g transform="translate(177.49 196.52)"><path d="m0 0v-0.036h111.57c12.841 0 23.251 10.41 23.251 23.251v8.832h-112.83v-8.832c0-12.417-9.735-22.56-21.989-23.215" fill="#6161b5"/></g><g clip-path="url(#clipPath694)" opacity=".28"><g transform="translate(192.28 196.52)"><path d="m0 0v-0.036h99.328c11.432 0 20.7 10.41 20.7 23.251v8.832h-100.45v-8.832c0-12.417-8.667-22.56-19.577-23.215" fill="#3e479b"/></g></g><g transform="translate(263.59 252.63)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(265.27 286.4)"><path d="m0 0h-83.401c-0.553 0-1 0.448-1 1s0.447 1 1 1h83.401c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(223.48 269.53)"><path d="m0 0h-42.616c-0.552 0-1 0.448-1 1s0.448 1 1 1h42.616c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(220.25 269.53)"><path d="m0 0h-36.159c-0.552 0-1 0.448-1 1s0.448 1 1 1h36.159c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(237.35 322.52)"><path d="m0 0h-54.901c-0.552 0-1 0.448-1 1s0.448 1 1 1h54.901c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(262.8 322.52)"><path d="m0 0h-16.724c-0.552 0-1 0.448-1 1s0.448 1 1 1h16.724c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(265.27 305.64)"><path d="m0 0h-59.45c-0.552 0-1 0.448-1 1s0.448 1 1 1h59.45c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(199.95 305.64)"><path d="m0 0h-18.08c-0.552 0-1 0.448-1 1s0.448 1 1 1h18.08c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(263.59 336.8)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(263.59 370.58)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g transform="translate(212.81 353.71)"><path d="m0 0h-30.361c-0.553 0-1 0.448-1 1s0.447 1 1 1h30.361c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g><g transform="translate(262.98 353.71)"><path d="m0 0h-36.159c-0.552 0-1 0.448-1 1s0.448 1 1 1h36.159c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g><g clip-path="url(#clipPath758)" opacity=".21001"><g transform="translate(326.1 344.9)"><path d="m0 0c-34.955 0-63.292-28.336-63.292-63.292 0-34.955 28.337-63.291 63.292-63.291s63.292 28.336 63.292 63.291c0 34.956-28.337 63.292-63.292 63.292" fill="#fff"/></g></g><g clip-path="url(#clipPath774)" opacity=".76"><g transform="translate(276.5 277.06)"><path d="m0 0c-2.209 0-4 1.791-4 4 0 31.929 25.976 57.904 57.904 57.904 2.209 0 4-1.791 4-4s-1.791-4-4-4c-27.517 0-49.904-22.387-49.904-49.904 0-2.209-1.791-4-4-4" fill="#fff"/></g></g><g clip-path="url(#clipPath790)" opacity=".58"><g transform="translate(326.1 342.9)"><path d="m0 0c-33.797 0-61.292-27.496-61.292-61.292 0-33.797 27.495-61.292 61.292-61.292s61.292 27.495 61.292 61.292c0 33.796-27.495 61.292-61.292 61.292m0-126.58c-36.002 0-65.292 29.29-65.292 65.292s29.29 65.292 65.292 65.292 65.292-29.29 65.292-65.292-29.29-65.292-65.292-65.292" fill="#3e479b"/></g></g><g transform="translate(326.1 218.31)"><path d="m0 0c-34.955 0-63.292 28.337-63.292 63.292s28.337 63.291 63.292 63.291 63.292-28.336 63.292-63.291-28.337-63.292-63.292-63.292m58.175 17.943c0.093 0.094 0.197 0.168 0.3 0.245 9.638 12.478 15.383 28.117 15.383 45.104 0 40.791-33.067 73.858-73.858 73.858s-73.858-33.067-73.858-73.858 33.067-73.858 73.858-73.858c16.916 0 32.487 5.708 44.939 15.274l8.544 8.545z" fill="#3e479b"/></g><g transform="translate(326.1 343.9)"><path d="m0 0c-34.348 0-62.292-27.944-62.292-62.292 0-34.349 27.944-62.292 62.292-62.292s62.292 27.943 62.292 62.292c0 34.348-27.944 62.292-62.292 62.292m0-126.58c-35.451 0-64.292 28.841-64.292 64.292s28.841 64.292 64.292 64.292 64.292-28.841 64.292-64.292-28.841-64.292-64.292-64.292m0 137.15c-40.174 0-72.858-32.684-72.858-72.858 0-40.175 32.684-72.858 72.858-72.858 16.149 0 31.459 5.196 44.278 15.028l13.19 13.188c0.094 0.095 0.194 0.177 0.297 0.255 9.875 12.831 15.093 28.176 15.093 44.387 0 40.174-32.684 72.858-72.858 72.858m0-147.72c-41.277 0-74.858 33.581-74.858 74.858s33.581 74.858 74.858 74.858 74.858-33.581 74.858-74.858c0-16.702-5.391-32.51-15.592-45.715l-0.188-0.185c-0.099-0.075-0.15-0.109-0.194-0.154l-13.335-13.322c-13.183-10.129-28.934-15.482-45.549-15.482" fill="#3e479b"/></g><g transform="translate(382.45 224.71)"><path d="m0 0-2.865 2.864c-1.103 1.103-1.103 2.891 0 3.993l-8.544-8.544-0.14-0.139c-1.102-1.103-1.102-2.891 0-3.993l3.477-3.477c1.147 1.922 4.501 5.685 8.072 9.296" fill="#4c65ba"/></g><g transform="translate(379.58 231.57)"><path d="m0 0c-1.103-1.103-1.103-2.891 0-3.993l2.865-2.864c3.455 3.494 7.102 6.832 9.148 8.218l-3.329 3.329c-1.009 1.01-2.586 1.084-3.693 0.246-0.102-0.078-0.207-0.152-0.3-0.246z" fill="#4c65ba"/></g><g clip-path="url(#clipPath822)" opacity=".42999"><g transform="translate(379.58 231.57)"><path d="m0 0c-1.103-1.103-1.103-2.891 0-3.993l2.865-2.864c3.455 3.494 7.102 6.832 9.148 8.218l-3.329 3.329c-1.009 1.01-2.586 1.084-3.693 0.246-0.102-0.078-0.207-0.152-0.3-0.246z" fill="#3e479b"/></g></g><g transform="translate(445.18 180.97)"><path d="m0 0-52.012 52.577c-0.187 0.19-0.757-0.061-1.575-0.617-2.046-1.387-5.692-4.725-9.147-8.219-3.572-3.611-6.925-7.374-8.073-9.296-0.373-0.625-0.517-1.059-0.353-1.224l52.012-52.578c5.287-5.346 13.86-5.346 19.148 0 5.287 5.345 5.287 14.011 0 19.357" fill="#599af2"/></g><g clip-path="url(#clipPath842)" opacity=".14"><g transform="translate(445.18 180.97)"><path d="m0 0-52.012 52.577c-0.7 0.708-6.627-4.601-11.716-9.848-4.33-4.464 58.44-67.432 63.728-62.086 5.287 5.345 5.287 14.011 0 19.357" fill="#3e479b"/></g></g><g transform="translate(253.12 246.25)"><path d="m0 0h-170.97c-9.988 0-18.085 8.097-18.085 18.085s8.097 18.085 18.085 18.085h170.97c9.988 0 18.086-8.097 18.086-18.085s-8.098-18.085-18.086-18.085" fill="#fff"/><path d="m0 0h-27.807l-0.134 36.17h27.941c9.988 0 18.086-8.097 18.086-18.085s-8.098-18.085-18.086-18.085" fill="#599af2"/></g><g transform="translate(246.08 271.82)"><path d="m0 0c-3.259 0-5.911-2.651-5.911-5.911 0-3.259 2.652-5.91 5.911-5.91 1.579 0 3.063 0.614 4.18 1.731 1.116 1.116 1.731 2.6 1.731 4.179 0 3.26-2.652 5.911-5.911 5.911m0-13.821c-4.362 0-7.911 3.549-7.911 7.91 0 4.362 3.549 7.911 7.911 7.911s7.911-3.549 7.911-7.911c0-2.113-0.823-4.1-2.317-5.593-1.494-1.495-3.481-2.317-5.594-2.317" fill="#fff"/></g><g transform="translate(257.21 253.71)"><path d="m0 0c-0.256 0-0.512 0.098-0.707 0.293l-6.276 6.276c-0.391 0.39-0.391 1.023 0 1.414s1.024 0.39 1.415 0l6.275-6.276c0.391-0.391 0.391-1.023 0-1.414-0.195-0.195-0.451-0.293-0.707-0.293" fill="#fff"/></g><g transform="translate(255.56 208.88)"><path d="m0 0h-85.1c-5.955 0-10.783 4.828-10.783 10.784v7.071c0 5.978-4.846 10.824-10.824 10.824h-39.306c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.08 4.513 10.08 10.08v84.396c0 5.567-4.513 10.081-10.08 10.081" fill="#f28393"/></g><g transform="translate(246.18 208.88)"><path d="m0 0h-85.099c-5.956 0-10.784 4.828-10.784 10.784v7.071c0 5.978-4.846 10.824-10.823 10.824h-39.307c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.081 4.513 10.081 10.08v84.396c0 5.567-4.514 10.081-10.081 10.081" fill="#f28393"/></g><g clip-path="url(#clipPath882)" opacity=".12"><g transform="translate(246.18 208.88)"><path d="m0 0h-85.099c-5.956 0-10.784 4.828-10.784 10.784v7.071c0 5.978-4.846 10.824-10.823 10.824h-39.307c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.081 4.513 10.081 10.08v84.396c0 5.567-4.514 10.081-10.081 10.081" fill="#fff"/></g></g><g clip-path="url(#clipPath898)" opacity=".12"><g transform="translate(224.6 208.88)"><path d="m0 0h-73.387c-5.136 0-9.3 4.828-9.3 10.784v7.071c0 5.978-4.179 10.824-9.334 10.824h-33.896c-5.155 0-9.334-4.846-9.334-10.824v-112.33c0-5.567 3.892-10.08 8.693-10.08h126.56c4.801 0 8.693 4.513 8.693 10.08v84.396c0 5.567-3.892 10.081-8.693 10.081" fill="#fff"/></g></g><g transform="translate(97.208 197.65)"><path d="m0 0c-0.552 0-1 0.447-1 1v24.539c0 3.801 3.092 6.893 6.892 6.893h28.965c0.552 0 1-0.448 1-1 0-0.553-0.448-1-1-1h-28.965c-2.697 0-4.892-2.195-4.892-4.893v-24.539c0-0.553-0.448-1-1-1" fill="#fff"/></g></g></g></svg>
<h1>This is a headline</h1>
<p>loreLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo</p>
<monster-button slot="action" class="monster-button-primary">Button</monster-button>
<monster-button slot="action">Button</monster-button>`;


<monster-state>
    <svg slot="visual" version="1.1" viewBox="0 0 612.41 583.39" xml:space="preserve"
         xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clipPath18"><path d="m0 500h500v-500h-500z"/></clipPath><clipPath
            id="clipPath26"><path d="m45.178 442.22h434.25v-377.14h-434.25z"/></clipPath><clipPath id="clipPath42"><path d="m204.22 467.91h26.586v-26.586h-26.586z"/></clipPath><clipPath
            id="clipPath58"><path d="m390.28 469.58h13.717v-13.718h-13.717z"/></clipPath><clipPath id="clipPath74"><path d="m145.82 434.05h18.382v-18.382h-18.382z"/></clipPath><clipPath
            id="clipPath90"><path d="m28.108 112.45h41.854v-41.854h-41.854z"/></clipPath><clipPath id="clipPath106"><path d="m422.16 453.67h53.968v-49.906h-53.968z"/></clipPath><clipPath
            id="clipPath122"><path d="m413.19 98.497h38.944v-40.498h-38.944z"/></clipPath><clipPath id="clipPath138"><path d="m37.65 477.47h50.732v-48.756h-50.732z"/></clipPath><clipPath
            id="clipPath154"><path d="m20.124 443.07h442.71v-328.26h-442.71z"/></clipPath><clipPath id="clipPath170"><path d="m40.299 424.66h403.77v-345.77h-403.77z"/></clipPath><clipPath
            id="clipPath186"><path d="m463.15 122.92h9v-9h-9z"/></clipPath><clipPath id="clipPath202"><path d="m255.28 473.64h9v-9h-9z"/></clipPath><clipPath
            id="clipPath218"><path d="m92.708 81.422h9.0005v-9h-9.0005z"/></clipPath><clipPath id="clipPath234"><path d="m377.74 61.499h7v-7h-7z"/></clipPath><clipPath
            id="clipPath250"><path d="m75.842 394h3v-3h-3z"/></clipPath><clipPath id="clipPath266"><path d="m386.17 443.78h10.81v-10.81h-10.81z"/></clipPath><clipPath
            id="clipPath282"><path d="m103.88 464.64h4.24v-4.24h-4.24z"/></clipPath><clipPath id="clipPath298"><path d="m442.27 473.16h3.604v-3.603h-3.604z"/></clipPath><clipPath
            id="clipPath314"><path d="m61.215 43.533h3.6033v-3.6033h-3.6033z"/></clipPath><clipPath id="clipPath330"><path d="m0 500h500v-500h-500z"/></clipPath><clipPath
            id="clipPath338"><path d="m89.761 362.35h386.54v-276.52h-386.54z"/></clipPath><clipPath id="clipPath362"><path d="m173.59 147.49h132.29v-71.271h-132.29z"/></clipPath><clipPath
            id="clipPath366"><path d="m173.59 147.49h132.29v-71.271h-132.29z"/></clipPath><clipPath id="clipPath422"><path d="m47.677 233.4h148.44v-79.857h-148.44z"/></clipPath><clipPath
            id="clipPath426"><path d="m47.677 233.4h148.44v-79.857h-148.44z"/></clipPath><clipPath id="clipPath482"><path d="m249.66 330.43h201.45v-217.56h-201.45z"/></clipPath><clipPath
            id="clipPath502"><path d="m261.96 317.99h160.2v-197.09h-160.2z"/></clipPath><clipPath id="clipPath522"><path d="m259.29 322.78h160.2v-197.09h-160.2z"/></clipPath><clipPath
            id="clipPath550"><path d="m292.72 320.3h68.297v-71.599h-68.297z"/></clipPath><clipPath id="clipPath570"><path d="m302.4 320.13h56.096v-16.961h-56.096z"/></clipPath><clipPath
            id="clipPath626"><path d="m348.24 363.49h91.426v-34.284h-91.426z"/></clipPath><clipPath id="clipPath658"><path d="m145.77 405.2h138.9v-208.72h-138.9z"/></clipPath><clipPath
            id="clipPath674"><path d="m158.11 405.2h126.57v-208.72h-126.57z"/></clipPath><clipPath id="clipPath694"><path d="m192.28 228.57h120.03v-32.083h-120.03z"/></clipPath><clipPath
            id="clipPath758"><path d="m262.8 344.9h126.58v-126.58h-126.58z"/></clipPath><clipPath id="clipPath774"><path d="m272.5 338.96h61.904v-61.904h-61.904z"/></clipPath><clipPath
            id="clipPath790"><path d="m260.8 346.9h130.58v-130.58h-130.58z"/></clipPath><clipPath id="clipPath822"><path d="m378.75 237.08h12.84v-12.369h-12.84z"/></clipPath><clipPath
            id="clipPath842"><path d="m381.24 233.61h67.907v-72.32h-67.907z"/></clipPath><clipPath id="clipPath882"><path d="m89.344 237.56h166.92v-133.24h-166.92z"/></clipPath><clipPath
            id="clipPath898"><path d="m89.344 237.56h143.94v-133.24h-143.94z"/></clipPath></defs>
        <g transform="matrix(1.3333 0 0 -1.3333 -26.831 636.63)"><g clip-path="url(#clipPath18)"><g clip-path="url(#clipPath26)" opacity=".41"><g transform="translate(479.21 201.52)"><path d="m0 0c0.428 7.37 0.236 14.775-0.595 22.107-3.903 34.45-21.577 66.935-47.59 89.856-9.28 8.178-19.839 15.503-25.878 26.297-10.172 18.178-9.402 39.07-22.025 57.018-12.638 17.969-31.055 31.982-51.824 39.179-61.926 21.457-148.62-13.48-140.82-88.091 0.027-0.268 0.058-0.657 0.091-1.15 1.037-15.498-11.126-28.528-26.608-28.896-57.135-1.356-106.32-45.406-116.84-101.21-6.768-35.885 4.314-75.218 30.564-100.6 19.594-18.95 45.885-29.361 72.188-36.514 52.739-14.343 108.24-17.35 162.62-11.865 50.902 5.134 104.59 19.767 137.51 58.929 17.56 20.89 27.621 47.68 29.205 74.94" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath42)" opacity=".31"><g transform="translate(230.81 454.61)"><path d="m0 0c0-7.341-5.951-13.293-13.292-13.293-7.342 0-13.293 5.952-13.293 13.293 0 7.342 5.951 13.293 13.293 13.293 7.341 0 13.292-5.951 13.292-13.293" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath58)" opacity=".31"><g transform="translate(404 462.72)"><path d="m0 0c0-3.788-3.07-6.859-6.858-6.859s-6.86 3.071-6.86 6.859 3.072 6.858 6.86 6.858 6.858-3.07 6.858-6.858" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath74)" opacity=".31"><g transform="translate(164.21 424.86)"><path d="m0 0c0-5.076-4.115-9.19-9.19-9.19-5.077 0-9.191 4.114-9.191 9.19s4.114 9.191 9.191 9.191c5.075 0 9.19-4.115 9.19-9.191" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath90)" opacity=".31"><g transform="translate(69.961 91.524)"><path d="m0 0c0-11.558-9.37-20.927-20.927-20.927-11.558 0-20.927 9.369-20.927 20.927s9.369 20.928 20.927 20.928c11.557 0 20.927-9.37 20.927-20.928" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath106)" opacity=".47"><g transform="translate(473.51 418.05)"><path d="m0 0c5.966 11.621 1.381 25.877-10.239 31.842-11.62 5.966-33.95 5.526-39.915-6.094-5.966-11.621 11.918-21.593 19.211-32.43 10.171-15.113 24.977-4.938 30.943 6.682" fill="#ecf1f7"/></g></g><g
                clip-path="url(#clipPath122)" opacity=".47"><g transform="translate(422.7 60.898)"><path d="m0 0c8.408-5.429 19.624-3.013 25.052 5.395 5.427 8.407 6.783 25.464-1.624 30.892s-17.365-7.451-26.179-12.191c-12.292-6.61-5.656-18.668 2.751-24.096" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath138)" opacity=".47"><g transform="translate(79.536 471.37)"><path d="m0 0c-9.248 8.588-23.706 8.053-32.294-1.195-8.588-9.247-14.019-30.131-4.772-38.719 9.248-8.588 23.201 5.438 35.187 9.386 16.718 5.507 11.127 21.94 1.879 30.528" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath154)" opacity=".47"><g transform="translate(28.561 371.54)"><path d="m0 0c-8.244-17.898-10.496-38.532-6.54-57.822 4.65-22.678 18.769-40.101 13.87-64.294-2.984-14.736-3.731-28.387-5.244-42.967-3.107-29.941 16.332-56.322 40.448-70.567 19.586-11.571 42.549-15.912 65.069-15.602 20.267 0.277 40.5 4.02 60.139 9.052 18.927 4.85 37.432 11.241 57.271 9.224 16.499-1.676 31.36-8.81 46.726-14.129 36.685-12.698 81.124-14.489 114.67 4.842 21.528 12.407 36.597 32.555 43.281 54.218 5.341 17.311 6.018 33.501 2.015 51.174-4.111 18.147-11.05 36.44-8.895 55.348 1.502 13.175 7.528 25.893 6.424 39.108-0.734 8.78-4.6 17.019-9.327 24.454-17.262 27.149-46.166 45.326-76.74 55.341-28.773 9.426-58.446 16.251-88.402 13.983-61.936-4.688-74.562 5.15-137.86 18.688-40.863 8.74-86.572-22.416-110.48-58.508-2.439-3.681-4.58-7.543-6.423-11.543" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath170)" opacity=".81"><g transform="translate(71.173 343.64)"><path d="m0 0c-1.271-14.292 3.55-29.02-0.479-43.174-4.824-16.946-18.788-29.639-24.48-46.276-8.411-24.583-8.007-52.131 2.208-76.086 4.922-11.546 12.113-22.275 21.934-29.695 15.138-11.439 34.975-13.948 53.63-12.497 27.764 2.16 57.06 14.179 84.975 10.901 15.404-1.809 20.108-18.482 28.063-29.479 8.998-12.438 21.252-22.209 34.799-28.712 24.952-11.978 54.898-13.112 80.4-2.251 27.227 11.596 50.957 39.914 49.398 71.938-0.722 14.815-6.653 29.53-3.906 44.088 3.445 18.268 17.21 34.917 27.185 49.802 11.017 16.439 17.686 36.043 18.993 56.043 0.015 0.227 0.03 0.454 0.043 0.68 2.045 34.503-19.718 65.971-52.551 76.769 0 0-69.859 22.976-69.862 22.976-70.886 23.313-141.71 22.543-206.89-11.672-14.104-7.403-37.068-29.463-41.798-44.674-0.893-2.869-1.405-5.766-1.664-8.681" fill="#e1e2fe"/></g></g><g
                clip-path="url(#clipPath186)" opacity=".58"><g transform="translate(472.15 118.42)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g
                clip-path="url(#clipPath202)" opacity=".58"><g transform="translate(264.27 469.14)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g
                clip-path="url(#clipPath218)" opacity=".58"><g transform="translate(101.71 76.922)"><path d="m0 0c0-2.485-2.015-4.5-4.5-4.5s-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5 4.5-2.015 4.5-4.5" fill="#3e479b"/></g></g><g
                clip-path="url(#clipPath234)" opacity=".58"><g transform="translate(384.74 57.999)"><path d="m0 0c0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5 1.567 3.5 3.5 3.5 3.5-1.567 3.5-3.5" fill="#ef929c"/></g></g><g
                clip-path="url(#clipPath250)" opacity=".58"><g transform="translate(78.842 392.5)"><path d="m0 0c0-0.829-0.671-1.5-1.5-1.5-0.828 0-1.5 0.671-1.5 1.5s0.672 1.5 1.5 1.5c0.829 0 1.5-0.671 1.5-1.5" fill="#3e479b"/></g></g><g
                clip-path="url(#clipPath266)" opacity=".58"><g transform="translate(396.86 437.24)"><path d="m0 0c-0.623-2.919-3.494-4.779-6.413-4.156s-4.779 3.494-4.156 6.413c0.624 2.919 3.495 4.78 6.414 4.156 2.918-0.623 4.779-3.495 4.155-6.413" fill="#ef929c"/></g></g><g
                clip-path="url(#clipPath282)" opacity=".58"><g transform="translate(108.07 462.08)"><path d="m0 0c-0.244-1.145-1.37-1.875-2.515-1.63-1.145 0.244-1.874 1.371-1.63 2.515 0.245 1.145 1.371 1.874 2.515 1.63 1.145-0.244 1.875-1.37 1.63-2.515" fill="#ef929c"/></g></g><g
                clip-path="url(#clipPath298)" opacity=".58"><g transform="translate(445.83 470.98)"><path d="m0 0c-0.207-0.973-1.164-1.593-2.138-1.385-0.972 0.207-1.592 1.164-1.384 2.137 0.207 0.973 1.165 1.594 2.137 1.386 0.973-0.208 1.593-1.165 1.385-2.138" fill="#3e479b"/></g></g><g
                clip-path="url(#clipPath314)" opacity=".58"><g transform="translate(64.778 41.356)"><path d="m0 0c-0.208-0.973-1.165-1.593-2.138-1.386-0.972 0.208-1.592 1.165-1.385 2.138 0.208 0.974 1.165 1.594 2.138 1.386s1.593-1.165 1.385-2.138" fill="#3e479b"/></g></g></g>
            <g clip-path="url(#clipPath330)"><g clip-path="url(#clipPath338)" opacity=".66"><g transform="translate(143.2 276.91)"><path d="m0 0c-16.422 1.254-28.719 15.583-27.465 32.005s15.583 28.719 32.005 27.465 28.719-15.583 27.465-32.005c-1.254-16.423-15.583-28.719-32.005-27.465m51.214 33.339-7.958 0.608c-0.609 5.993-2.511 11.642-5.449 16.638l6.057 5.198c3.068 2.633 3.421 7.254 0.788 10.321-2.633 3.068-7.254 3.421-10.322 0.789l-6.057-5.198c-4.492 3.662-9.787 6.4-15.618 7.912l0.608 7.958c0.307 4.031-2.711 7.548-6.742 7.855-4.031 0.309-7.548-2.71-7.855-6.741l-0.608-7.958c-5.993-0.609-11.641-2.512-16.638-5.449l-5.198 6.057c-2.633 3.067-7.254 3.421-10.322 0.788-3.067-2.633-3.42-7.254-0.788-10.322l5.198-6.057c-3.662-4.492-6.4-9.787-7.912-15.618l-7.958 0.608c-4.031 0.308-7.548-2.711-7.856-6.742-0.307-4.03 2.711-7.548 6.742-7.856l7.958-0.607c0.609-5.993 2.511-11.642 5.449-16.638l-6.057-5.197c-3.068-2.633-3.421-7.254-0.788-10.323 2.633-3.068 7.254-3.42 10.322-0.787l6.057 5.197c4.492-3.662 9.787-6.4 15.618-7.912l-0.608-7.958c-0.307-4.03 2.711-7.548 6.742-7.856 4.03-0.307 7.548 2.711 7.856 6.742l0.607 7.958c5.993 0.609 11.642 2.511 16.638 5.449l5.198-6.057c2.633-3.068 7.254-3.42 10.322-0.788 3.068 2.633 3.42 7.254 0.787 10.322l-5.197 6.056c3.662 4.493 6.4 9.788 7.912 15.619l7.958-0.608c4.031-0.307 7.548 2.711 7.856 6.741 0.307 4.032-2.711 7.549-6.742 7.856" fill="#fff"/></g><g
                    transform="translate(354.27 143.95)"><path d="m0 0c-2.008 0-4.024-0.309-5.992-0.932-5.036-1.594-9.15-5.054-11.582-9.743-2.434-4.687-2.896-10.043-1.301-15.078 1.595-5.036 5.055-9.149 9.743-11.582 4.69-2.435 10.046-2.894 15.078-1.301 5.036 1.595 9.15 5.055 11.582 9.743 2.434 4.688 2.896 10.043 1.301 15.079s-5.055 9.149-9.743 11.582c-2.856 1.482-5.959 2.232-9.086 2.232m-0.048-41.568c-3.444 0-6.86 0.826-10.006 2.458-5.162 2.679-8.971 7.208-10.727 12.753s-1.247 11.441 1.431 16.604c2.68 5.162 7.208 8.972 12.753 10.728 5.546 1.756 11.441 1.247 16.605-1.432 5.162-2.68 8.972-7.209 10.728-12.753 1.756-5.545 1.247-11.442-1.432-16.604-2.68-5.163-7.208-8.972-12.753-10.728-2.167-0.687-4.389-1.026-6.599-1.026m4.392-5.583 1.93-6.099c0.331-1.044 1.048-1.896 2.02-2.4 0.972-0.505 2.081-0.6 3.126-0.27 1.044 0.331 1.896 1.048 2.401 2.02 0.505 0.971 0.6 2.082 0.27 3.126l-1.932 6.097 0.74 0.39c3.539 1.862 6.57 4.411 9.008 7.576l0.51 0.662 5.678-2.945c0.971-0.505 2.081-0.601 3.126-0.271 1.044 0.331 1.896 1.048 2.4 2.021 1.041 2.005 0.256 4.484-1.75 5.526l-5.678 2.947 0.248 0.798c1.186 3.816 1.526 7.761 1.012 11.726l-0.108 0.83 6.098 1.931c2.155 0.682 3.353 2.991 2.671 5.145-0.331 1.044-1.048 1.897-2.02 2.402-0.97 0.504-2.081 0.599-3.125 0.269l-6.098-1.932-0.39 0.741c-1.862 3.539-4.411 6.57-7.577 9.007l-0.663 0.51 2.947 5.678c1.041 2.006 0.256 4.485-1.75 5.526-2.008 1.044-4.486 0.256-5.526-1.75l-2.947-5.677-0.799 0.248c-3.815 1.185-7.76 1.523-11.726 1.011l-0.83-0.108-1.93 6.099c-0.33 1.044-1.048 1.896-2.02 2.4-0.972 0.505-2.079 0.601-3.126 0.271-2.154-0.683-3.352-2.992-2.671-5.147l1.932-6.097-0.74-0.389c-3.539-1.864-6.57-4.412-9.007-7.577l-0.51-0.664-5.679 2.948c-0.97 0.505-2.081 0.599-3.125 0.269-1.044-0.331-1.896-1.048-2.4-2.02-0.505-0.972-0.601-2.081-0.271-3.125 0.332-1.044 1.048-1.897 2.021-2.401l5.677-2.947-0.248-0.799c-1.186-3.815-1.526-7.76-1.012-11.725l0.108-0.83-6.098-1.931c-1.044-0.33-1.897-1.048-2.401-2.02-0.505-0.971-0.599-2.082-0.269-3.126 0.682-2.154 2.991-3.354 5.145-2.67l6.098 1.931 0.39-0.74c1.862-3.539 4.411-6.569 7.576-9.007l0.662-0.51-2.945-5.678c-0.505-0.972-0.601-2.081-0.271-3.125 0.331-1.044 1.048-1.897 2.021-2.401 2.005-1.042 4.485-0.255 5.526 1.75l2.947 5.677 0.799-0.248c3.815-1.186 7.763-1.523 11.725-1.012zm5.831-10.963c-0.964 0-1.921 0.231-2.802 0.688-1.445 0.75-2.513 2.019-3.005 3.572l-1.43 4.515c-3.695-0.377-7.366-0.059-10.938 0.943l-2.182-4.203c-1.549-2.984-5.239-4.152-8.223-2.603-1.447 0.75-2.513 2.018-3.005 3.572-0.492 1.553-0.35 3.204 0.401 4.651l2.181 4.203c-2.876 2.343-5.248 5.165-7.068 8.402l-4.514-1.43c-3.207-1.015-6.641 0.768-7.655 3.974-0.493 1.553-0.35 3.204 0.4 4.65 0.751 1.447 2.019 2.514 3.572 3.005l4.515 1.43c-0.376 3.694-0.06 7.366 0.943 10.939l-4.203 2.182c-1.446 0.75-2.513 2.019-3.005 3.572s-0.349 3.204 0.402 4.651c0.75 1.445 2.018 2.512 3.572 3.005 1.552 0.491 3.204 0.349 4.65-0.401l4.203-2.182c2.344 2.875 5.165 5.249 8.403 7.069l-1.43 4.514c-1.015 3.206 0.768 6.64 3.974 7.656 1.55 0.492 3.204 0.348 4.65-0.402 1.446-0.751 2.514-2.019 3.005-3.572l1.43-4.515c3.695 0.378 7.366 0.06 10.939-0.943l2.182 4.204c1.549 2.985 5.235 4.154 8.223 2.604 2.984-1.55 4.152-5.239 2.604-8.224l-2.182-4.202c2.876-2.345 5.249-5.166 7.069-8.403l4.514 1.429c1.554 0.492 3.204 0.35 4.651-0.4 1.446-0.751 2.512-2.02 3.005-3.573 1.014-3.206-0.768-6.64-3.974-7.656l-4.515-1.429c0.376-3.695 0.06-7.366-0.943-10.94l4.204-2.18c2.984-1.55 4.152-5.24 2.603-8.224-0.75-1.446-2.018-2.514-3.572-3.005-1.552-0.492-3.203-0.349-4.651 0.401l-4.202 2.181c-2.346-2.876-5.166-5.248-8.404-7.067l1.43-4.515c0.492-1.553 0.35-3.205-0.4-4.65-0.751-1.447-2.02-2.514-3.574-3.005-0.607-0.193-1.229-0.288-1.848-0.288" fill="#fff"/></g><g
                    transform="translate(440.19 153.6)"><path d="m0 0h0.01zm-16.757 49.302c-5.761 0-11.345-1.844-16.045-5.352-11.895-8.878-14.35-25.78-5.472-37.677 8.878-11.895 25.779-14.347 37.676-5.471 5.762 4.301 9.505 10.588 10.538 17.704 1.035 7.116-0.765 14.209-5.066 19.972-4.301 5.762-10.588 9.505-17.704 10.539-1.313 0.19-2.624 0.285-3.927 0.285m0.093-55.835c-8.824 0-17.542 4.012-23.214 11.61-9.537 12.781-6.899 30.939 5.881 40.477 6.191 4.619 13.813 6.554 21.454 5.442 7.646-1.11 14.4-5.132 19.021-11.323 4.62-6.191 6.552-13.81 5.442-21.454-1.11-7.646-5.131-14.401-11.322-19.021-5.181-3.866-11.246-5.731-17.262-5.731m-26.288 2.012 0.611-0.571c3.956-3.702 8.572-6.449 13.718-8.167l0.793-0.264-1.194-8.222c-0.464-3.193 1.757-6.17 4.951-6.635 3.194-0.463 6.171 1.757 6.635 4.951l1.194 8.224 0.836 0.027c5.422 0.182 10.629 1.503 15.474 3.926l0.748 0.374 4.97-6.659c0.935-1.253 2.302-2.067 3.85-2.291 1.549-0.228 3.089 0.166 4.343 1.101 2.585 1.931 3.12 5.606 1.188 8.192l-4.969 6.659 0.572 0.611c3.701 3.955 6.449 8.571 8.167 13.718l0.264 0.793 8.222-1.194c3.198-0.461 6.169 1.758 6.635 4.951 0.463 3.193-1.758 6.17-4.952 6.635l-8.223 1.194-0.027 0.836c-0.182 5.423-1.503 10.629-3.926 15.474l-0.374 0.748 6.658 4.97c2.587 1.93 3.121 5.605 1.19 8.192-0.934 1.253-2.301 2.066-3.849 2.291-1.547 0.226-3.089-0.167-4.343-1.102h1e-3l-6.659-4.97-0.612 0.572c-3.956 3.703-8.572 6.45-13.717 8.167l-0.793 0.264 1.194 8.223c0.225 1.547-0.167 3.089-1.102 4.342s-2.302 2.067-3.849 2.292c-3.203 0.466-6.17-1.758-6.635-4.951l-1.194-8.223-0.836-0.027c-5.421-0.182-10.627-1.503-15.474-3.926l-0.748-0.374-4.971 6.658c-0.934 1.254-2.301 2.067-3.848 2.292-1.546 0.223-3.089-0.167-4.342-1.102-1.254-0.935-2.067-2.302-2.292-3.849-0.225-1.548 0.166-3.09 1.102-4.343l4.969-6.658-0.571-0.611c-3.703-3.956-6.45-8.573-8.167-13.718l-0.265-0.793-8.222 1.194c-1.545 0.222-3.089-0.168-4.342-1.102-1.253-0.935-2.067-2.302-2.292-3.849-0.464-3.194 1.758-6.171 4.951-6.635l8.223-1.194 0.027-0.836c0.182-5.421 1.503-10.627 3.927-15.475l0.374-0.748-6.66-4.969c-1.252-0.935-2.067-2.302-2.291-3.85-0.225-1.547 0.167-3.089 1.102-4.343 0.935-1.252 2.302-2.066 3.849-2.291 1.546-0.223 3.089 0.167 4.343 1.103zm19.725-25.92c-0.374 0-0.752 0.027-1.133 0.083-4.286 0.623-7.266 4.616-6.643 8.9l0.955 6.576c-4.841 1.728-9.221 4.335-13.042 7.763l-5.325-3.974c-1.682-1.255-3.749-1.78-5.825-1.477-2.076 0.3-3.91 1.392-5.165 3.074-2.59 3.471-1.874 8.401 1.596 10.991l5.326 3.974c-2.201 4.639-3.455 9.58-3.733 14.711l-6.575 0.956c-4.285 0.622-7.266 4.615-6.643 8.9 0.301 2.076 1.393 3.91 3.075 5.165 1.681 1.254 3.75 1.778 5.825 1.478l6.577-0.955c1.727 4.84 4.334 9.22 7.763 13.042l-3.975 5.324c-1.254 1.681-1.779 3.751-1.477 5.826 0.301 2.076 1.393 3.91 3.075 5.165 1.68 1.255 3.749 1.779 5.825 1.479 2.076-0.302 3.91-1.394 5.165-3.076l3.975-5.324c4.638 2.199 9.58 3.453 14.71 3.732l0.956 6.575c0.623 4.286 4.627 7.268 8.9 6.642 2.076-0.3 3.91-1.392 5.165-3.074 1.255-1.681 1.779-3.75 1.478-5.825l-0.956-6.577c4.841-1.727 9.221-4.334 13.042-7.763l5.326 3.975c3.467 2.589 8.399 1.875 10.991-1.598 2.59-3.47 1.873-8.4-1.598-10.99l-5.324-3.975c2.199-4.637 3.453-9.578 3.731-14.71l6.577-0.956c4.285-0.623 7.264-4.616 6.642-8.9-0.623-4.286-4.625-7.27-8.9-6.643l-6.576 0.955c-1.728-4.841-4.335-9.221-7.763-13.042l3.974-5.325c2.589-3.469 1.874-8.399-1.596-10.991-1.682-1.254-3.751-1.778-5.827-1.478-2.076 0.302-3.91 1.394-5.165 3.076l-3.974 5.324c-4.639-2.199-9.579-3.453-14.711-3.732l-0.956-6.576c-0.566-3.904-3.932-6.724-7.767-6.725" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath362)" opacity=".81"><g transform="translate(287.66 119.14)"><path d="m0 0h-20.542c-0.553 0-1 0.447-1 1s0.447 1 1 1h20.542c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g>
                    <g transform="translate(287.66 97.783)"><path d="m0 0h-20.542c-0.553 0-1 0.447-1 1s0.447 1 1 1h20.542c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g>
                    <g transform="translate(176.3 145.49)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-65.849c0-0.391 0.319-0.71 0.711-0.71h126.87c0.392 0 0.712 0.319 0.712 0.71v65.849c0 0.393-0.32 0.712-0.712 0.712zm126.87-69.271h-126.87c-1.495 0-2.711 1.215-2.711 2.71v65.849c0 1.495 1.216 2.712 2.711 2.712h126.87c1.495 0 2.712-1.217 2.712-2.712v-65.849c0-1.495-1.217-2.71-2.712-2.71" fill="#fff"/></g>
                    <g clip-path="url(#clipPath366)" opacity=".66"><g transform="translate(176.3 145.49)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-65.849c0-0.391 0.319-0.71 0.711-0.71h126.87c0.392 0 0.712 0.319 0.712 0.71v65.849c0 0.393-0.32 0.712-0.712 0.712zm126.87-69.271h-126.87c-1.495 0-2.711 1.215-2.711 2.71v65.849c0 1.495 1.216 2.712 2.711 2.712h126.87c1.495 0 2.712-1.217 2.712-2.712v-65.849c0-1.495-1.217-2.71-2.712-2.71" fill="#fff"/></g></g>
                    <g transform="translate(287.66 129.5)"><path d="m0 0h-97.889c-0.552 0-1 0.447-1 1s0.448 1 1 1h97.889c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g>
                    <g transform="translate(287.66 108.77)"><path d="m0 0h-97.889c-0.552 0-1 0.447-1 1s0.448 1 1 1h97.889c0.553 0 1-0.447 1-1s-0.447-1-1-1" fill="#fff"/></g>
                    <g transform="translate(242.55 119.14)"><path d="m0 0h-52.776c-0.552 0-1 0.447-1 1s0.448 1 1 1h52.776c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(242.55 97.783)"><path d="m0 0h-52.776c-0.552 0-1 0.447-1 1s0.448 1 1 1h52.776c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(225.36 87.891)"><path d="m0 0h-35.592c-0.552 0-1 0.447-1 1s0.448 1 1 1h35.592c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath422)" opacity=".81"><g transform="translate(91.118 183.16)"><path d="m0 0h-23.088c-0.553 0-1 0.447-1 1s0.447 1 1 1h23.088c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(91.118 207.16)"><path d="m0 0h-23.088c-0.553 0-1 0.447-1 1s0.447 1 1 1h23.088c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(50.389 231.4)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-74.434c0-0.392 0.319-0.711 0.711-0.711h143.02c0.392 0 0.711 0.319 0.711 0.711v74.434c0 0.393-0.319 0.712-0.711 0.712zm143.02-77.857h-143.02c-1.495 0-2.711 1.216-2.711 2.711v74.434c0 1.495 1.216 2.712 2.711 2.712h143.02c1.495 0 2.711-1.217 2.711-2.712v-74.434c0-1.495-1.216-2.711-2.711-2.711" fill="#fff"/></g>
                    <g clip-path="url(#clipPath426)" opacity=".66"><g transform="translate(50.389 231.4)"><path d="m0 0c-0.392 0-0.711-0.319-0.711-0.712v-74.434c0-0.392 0.319-0.711 0.711-0.711h143.02c0.392 0 0.711 0.319 0.711 0.711v74.434c0 0.393-0.319 0.712-0.711 0.712zm143.02-77.857h-143.02c-1.495 0-2.711 1.216-2.711 2.711v74.434c0 1.495 1.216 2.712 2.711 2.712h143.02c1.495 0 2.711-1.217 2.711-2.712v-74.434c0-1.495-1.216-2.711-2.711-2.711" fill="#fff"/></g></g>
                    <g transform="translate(178.05 171.52)"><path d="m0 0h-110.02c-0.552 0-1 0.447-1 1s0.448 1 1 1h110.02c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(178.05 194.81)"><path d="m0 0h-110.02c-0.552 0-1 0.447-1 1s0.448 1 1 1h110.02c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(178.05 183.16)"><path d="m0 0h-59.316c-0.553 0-1 0.447-1 1s0.447 1 1 1h59.316c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(178.05 207.16)"><path d="m0 0h-59.316c-0.553 0-1 0.447-1 1s0.447 1 1 1h59.316c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g>
                    <g transform="translate(178.05 218.28)"><path d="m0 0h-40.003c-0.552 0-1 0.447-1 1s0.448 1 1 1h40.003c0.552 0 1-0.447 1-1s-0.448-1-1-1" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath482)" opacity=".14"><g transform="translate(359.99 113.13)"><path d="m0 0-109.42 64.872c-0.879 0.522-1.17 1.657-0.648 2.537l88.33 148.98c0.521 0.879 1.656 1.17 2.536 0.648l109.42-64.873c0.88-0.521 1.17-1.657 0.648-2.537l-88.329-148.98c-0.521-0.878-1.657-1.168-2.537-0.647" fill="#3e479b"/></g></g>
                <g transform="translate(357.14 119.1)"><path d="m0 0-109.42 64.873c-0.879 0.522-1.17 1.657-0.648 2.537l88.329 148.98c0.521 0.879 1.657 1.169 2.537 0.648l109.42-64.873c0.88-0.522 1.17-1.657 0.648-2.537l-88.329-148.98c-0.521-0.878-1.657-1.169-2.537-0.648" fill="#f7a9b4"/></g>
                <g clip-path="url(#clipPath502)" opacity=".14"><g transform="translate(388.57 120.93)"><path d="m0 0-125.1 23.06c-1.005 0.185-1.67 1.15-1.484 2.156l31.396 170.33c0.186 1.006 1.152 1.671 2.157 1.485l125.1-23.059c1.005-0.185 1.67-1.151 1.485-2.156l-31.397-170.33c-0.185-1.006-1.151-1.671-2.156-1.485" fill="#3e479b"/></g></g>
                <g transform="translate(387.72 125.38)"><path d="m0 0-128.74 23.73 32.068 173.97 128.74-23.73z" fill="#fff"/></g>
                <g clip-path="url(#clipPath522)" opacity=".39"><g transform="translate(385.9 125.72)"><path d="m0 0-125.1 23.06c-1.005 0.185-1.67 1.15-1.484 2.156l31.396 170.33c0.186 1.006 1.151 1.671 2.157 1.485l125.1-23.059c1.006-0.185 1.671-1.151 1.486-2.156l-31.397-170.33c-0.185-1.006-1.151-1.671-2.156-1.485" fill="#f7a9b4"/></g></g>
                <g transform="translate(400.31 278.86)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.621-0.802 1.164 0.101 0.543 0.615 0.901 1.165 0.802l31.315-5.772c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.508-0.819-0.982-0.819" fill="#fff"/></g>
                <g transform="translate(398.46 268.86)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.622-0.802 1.165 0.101 0.542 0.616 0.901 1.165 0.802l31.315-5.773c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.508-0.819-0.982-0.819" fill="#fff"/></g>
                <g transform="translate(396.46 257.98)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-31.314 5.772c-0.543 0.1-0.902 0.621-0.802 1.164s0.614 0.901 1.165 0.802l31.315-5.772c0.543-0.1 0.902-0.621 0.801-1.164-0.088-0.482-0.509-0.819-0.982-0.819" fill="#fff"/></g>
                <g clip-path="url(#clipPath550)" opacity=".14"><g transform="translate(348.01 248.74)"><path d="m0 0-53.652 9.89c-1.089 0.2-1.809 1.245-1.609 2.334l10.636 57.7c0.201 1.088 1.246 1.808 2.335 1.608l53.652-9.89c1.089-0.201 1.809-1.246 1.608-2.334l-10.636-57.701c-0.2-1.088-1.246-1.808-2.334-1.607" fill="#3e479b"/></g></g>
                <g transform="translate(346.04 252.09)"><path d="m0 0-51.148 9.428c-1.089 0.201-1.809 1.246-1.609 2.335l10.07 54.628c0.201 1.088 1.247 1.808 2.334 1.608l51.149-9.429c1.089-0.2 1.808-1.245 1.608-2.334l-10.07-54.628c-0.2-1.088-1.245-1.809-2.334-1.608" fill="#599af2"/></g>
                <g clip-path="url(#clipPath570)" opacity=".070007"><g transform="translate(357.49 303.17)"><path d="m0 0-55.091 10.155 0.961 5.213c0.194 1.056 1.209 1.755 2.266 1.56l51.333-9.462c1.018-0.188 1.692-1.166 1.505-2.184z" fill="#ecf1f7"/></g></g>
                <g transform="translate(317.82 286.15)"><path d="m0 0c-0.388 0-0.781 0.035-1.176 0.108l-0.762 0.141c-4.05 0.746-6.739 4.649-5.993 8.7l1.924 10.439c0.151 0.815 0.939 1.355 1.747 1.203 0.816-0.15 1.354-0.932 1.204-1.747l-1.923-10.439c-0.448-2.424 1.161-4.759 3.584-5.206l0.763-0.141c1.885-0.35 3.699 0.903 4.046 2.788l4.871 26.422c0.359 1.944-0.931 3.818-2.876 4.177l-1.305 0.24c-2.072 0.381-4.053-0.99-4.435-3.054l-0.119-0.652c-0.152-0.815-0.943-1.353-1.747-1.203-0.815 0.15-1.354 0.932-1.204 1.746l0.12 0.653c0.682 3.692 4.24 6.142 7.928 5.46l1.305-0.24c3.571-0.658 5.942-4.099 5.284-7.67l-4.871-26.423c-0.575-3.116-3.304-5.302-6.365-5.302" fill="#3e479b"/></g>
                <g transform="translate(323.02 308.34)"><path d="m0 0c-0.03 0-0.061 2e-3 -0.092 8e-3l-19.989 3.685c-0.272 0.05-0.451 0.31-0.401 0.582s0.307 0.455 0.583 0.401l19.989-3.684c0.271-0.05 0.451-0.311 0.401-0.583-0.045-0.241-0.255-0.409-0.491-0.409" fill="#fff"/></g>
                <g transform="translate(384.14 205)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-95.683 17.637c-0.543 0.1-0.903 0.621-0.802 1.165 0.101 0.542 0.614 0.905 1.165 0.802l95.684-17.638c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g>
                <g transform="translate(377.3 167.89)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-95.684 17.636c-0.543 0.1-0.903 0.621-0.802 1.165 0.1 0.542 0.615 0.907 1.165 0.802l95.685-17.637c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.509-0.818-0.982-0.818" fill="#fff"/></g>
                <g transform="translate(330.27 195.75)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-45.232 8.337c-0.543 0.1-0.902 0.622-0.802 1.166 0.101 0.542 0.615 0.907 1.165 0.801l45.233-8.338c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.509-0.818-0.982-0.818" fill="#fff"/></g>
                <g transform="translate(336.5 229.56)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-45.232 8.337c-0.543 0.1-0.902 0.622-0.802 1.165 0.101 0.542 0.616 0.9 1.165 0.801l45.233-8.337c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g>
                <g transform="translate(380.75 186.59)"><path d="m0 0c-0.06 0-0.121 5e-3 -0.183 0.017l-43.096 7.944c-0.543 0.1-0.903 0.621-0.802 1.165 0.1 0.542 0.614 0.904 1.165 0.802l43.097-7.945c0.543-0.099 0.902-0.621 0.801-1.165-0.088-0.481-0.508-0.818-0.982-0.818" fill="#fff"/></g>
                <g transform="translate(370.62 383.15)"><path d="m0 0h-53.181c-1.84 0-3.333 1.492-3.333 3.333v17.787c0 1.84 1.493 3.333 3.333 3.333h53.181c1.841 0 3.333-1.493 3.333-3.333v-17.787c0-1.841-1.492-3.333-3.333-3.333" fill="#599af2"/></g>
                <g transform="translate(410.68 356.49)"><path d="m0 0h-74.39c-1.84 0-3.333 1.492-3.333 3.333v26.453c0 1.84 1.493 3.333 3.333 3.333h74.39c1.841 0 3.333-1.493 3.333-3.333v-26.453c0-1.841-1.492-3.333-3.333-3.333" fill="#f7a9b4"/></g>
                <g transform="translate(352.77 363.49)"><path d="m0 0h82.375c2.489 0 4.525-2.036 4.525-4.525v-25.235c0-2.488-2.036-4.524-4.525-4.524h-82.375c-2.489 0-4.525 2.036-4.525 4.524v25.235c0 2.489 2.036 4.525 4.525 4.525" fill="#fff"/></g>
                <g clip-path="url(#clipPath626)" opacity=".74"><g transform="translate(352.77 363.49)"><path d="m0 0h82.375c2.489 0 4.525-2.036 4.525-4.525v-25.235c0-2.488-2.036-4.524-4.525-4.524h-82.375c-2.489 0-4.525 2.036-4.525 4.524v25.235c0 2.489 2.036 4.525 4.525 4.525" fill="#6d6cd4"/></g></g>
                <g transform="translate(410.65 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g>
                <g transform="translate(394.26 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g>
                <g transform="translate(378.99 349.28)"><path d="m0 0c-1.639 0-2.972-1.333-2.972-2.972 0-1.638 1.333-2.971 2.972-2.971s2.972 1.333 2.972 2.971c0 1.639-1.333 2.972-2.972 2.972m0-6.943c-2.19 0-3.972 1.781-3.972 3.971s1.782 3.972 3.972 3.972 3.972-1.782 3.972-3.972-1.782-3.971-3.972-3.971" fill="#fff"/></g>
                <g transform="translate(152.38 405.2)"><path d="m0 0h127.64c2.571 0 4.655-2.084 4.655-4.655v-188c0-8.869-7.189-16.058-16.058-16.058h-88.627c-18.899 0-34.219 15.32-34.219 34.218v167.89c0 3.65 2.958 6.608 6.607 6.608" fill="#fff"/></g>
                <g clip-path="url(#clipPath658)" opacity=".39"><g transform="translate(147.39 405.2)"><path d="m0 0h134.78c1.379 0 2.496-1.117 2.496-2.496v-190.91c0-8.456-6.855-15.31-15.311-15.31h-92.416c-17.219 0-31.178 13.958-31.178 31.176v175.92c0 0.897 0.728 1.625 1.625 1.625" fill="#6d6cd4"/></g></g>
                <g clip-path="url(#clipPath674)" opacity=".39"><g transform="translate(159.21 405.2)"><path d="m0 0h123.49c1.09 0 1.973-0.884 1.973-1.974v-191.96c0-8.167-6.621-14.788-14.789-14.788h-81.122c-16.93 0-30.656 13.724-30.656 30.655v176.96c0 0.609 0.494 1.103 1.103 1.103" fill="#3e479b"/></g></g>
                <g transform="translate(177.49 196.52)"><path d="m0 0v-0.036h111.57c12.841 0 23.251 10.41 23.251 23.251v8.832h-112.83v-8.832c0-12.417-9.735-22.56-21.989-23.215" fill="#6161b5"/></g>
                <g clip-path="url(#clipPath694)" opacity=".28"><g transform="translate(192.28 196.52)"><path d="m0 0v-0.036h99.328c11.432 0 20.7 10.41 20.7 23.251v8.832h-100.45v-8.832c0-12.417-8.667-22.56-19.577-23.215" fill="#3e479b"/></g></g>
                <g transform="translate(263.59 252.63)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(265.27 286.4)"><path d="m0 0h-83.401c-0.553 0-1 0.448-1 1s0.447 1 1 1h83.401c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(223.48 269.53)"><path d="m0 0h-42.616c-0.552 0-1 0.448-1 1s0.448 1 1 1h42.616c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g>
                <g transform="translate(220.25 269.53)"><path d="m0 0h-36.159c-0.552 0-1 0.448-1 1s0.448 1 1 1h36.159c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g>
                <g transform="translate(237.35 322.52)"><path d="m0 0h-54.901c-0.552 0-1 0.448-1 1s0.448 1 1 1h54.901c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g>
                <g transform="translate(262.8 322.52)"><path d="m0 0h-16.724c-0.552 0-1 0.448-1 1s0.448 1 1 1h16.724c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(265.27 305.64)"><path d="m0 0h-59.45c-0.552 0-1 0.448-1 1s0.448 1 1 1h59.45c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(199.95 305.64)"><path d="m0 0h-18.08c-0.552 0-1 0.448-1 1s0.448 1 1 1h18.08c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g>
                <g transform="translate(263.59 336.8)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(263.59 370.58)"><path d="m0 0h-80.219c-0.552 0-1 0.448-1 1s0.448 1 1 1h80.219c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g transform="translate(212.81 353.71)"><path d="m0 0h-30.361c-0.553 0-1 0.448-1 1s0.447 1 1 1h30.361c0.552 0 1-0.448 1-1s-0.448-1-1-1" fill="#fff"/></g>
                <g transform="translate(262.98 353.71)"><path d="m0 0h-36.159c-0.552 0-1 0.448-1 1s0.448 1 1 1h36.159c0.553 0 1-0.448 1-1s-0.447-1-1-1" fill="#fff"/></g>
                <g clip-path="url(#clipPath758)" opacity=".21001"><g transform="translate(326.1 344.9)"><path d="m0 0c-34.955 0-63.292-28.336-63.292-63.292 0-34.955 28.337-63.291 63.292-63.291s63.292 28.336 63.292 63.291c0 34.956-28.337 63.292-63.292 63.292" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath774)" opacity=".76"><g transform="translate(276.5 277.06)"><path d="m0 0c-2.209 0-4 1.791-4 4 0 31.929 25.976 57.904 57.904 57.904 2.209 0 4-1.791 4-4s-1.791-4-4-4c-27.517 0-49.904-22.387-49.904-49.904 0-2.209-1.791-4-4-4" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath790)" opacity=".58"><g transform="translate(326.1 342.9)"><path d="m0 0c-33.797 0-61.292-27.496-61.292-61.292 0-33.797 27.495-61.292 61.292-61.292s61.292 27.495 61.292 61.292c0 33.796-27.495 61.292-61.292 61.292m0-126.58c-36.002 0-65.292 29.29-65.292 65.292s29.29 65.292 65.292 65.292 65.292-29.29 65.292-65.292-29.29-65.292-65.292-65.292" fill="#3e479b"/></g></g>
                <g transform="translate(326.1 218.31)"><path d="m0 0c-34.955 0-63.292 28.337-63.292 63.292s28.337 63.291 63.292 63.291 63.292-28.336 63.292-63.291-28.337-63.292-63.292-63.292m58.175 17.943c0.093 0.094 0.197 0.168 0.3 0.245 9.638 12.478 15.383 28.117 15.383 45.104 0 40.791-33.067 73.858-73.858 73.858s-73.858-33.067-73.858-73.858 33.067-73.858 73.858-73.858c16.916 0 32.487 5.708 44.939 15.274l8.544 8.545z" fill="#3e479b"/></g>
                <g transform="translate(326.1 343.9)"><path d="m0 0c-34.348 0-62.292-27.944-62.292-62.292 0-34.349 27.944-62.292 62.292-62.292s62.292 27.943 62.292 62.292c0 34.348-27.944 62.292-62.292 62.292m0-126.58c-35.451 0-64.292 28.841-64.292 64.292s28.841 64.292 64.292 64.292 64.292-28.841 64.292-64.292-28.841-64.292-64.292-64.292m0 137.15c-40.174 0-72.858-32.684-72.858-72.858 0-40.175 32.684-72.858 72.858-72.858 16.149 0 31.459 5.196 44.278 15.028l13.19 13.188c0.094 0.095 0.194 0.177 0.297 0.255 9.875 12.831 15.093 28.176 15.093 44.387 0 40.174-32.684 72.858-72.858 72.858m0-147.72c-41.277 0-74.858 33.581-74.858 74.858s33.581 74.858 74.858 74.858 74.858-33.581 74.858-74.858c0-16.702-5.391-32.51-15.592-45.715l-0.188-0.185c-0.099-0.075-0.15-0.109-0.194-0.154l-13.335-13.322c-13.183-10.129-28.934-15.482-45.549-15.482" fill="#3e479b"/></g>
                <g transform="translate(382.45 224.71)"><path d="m0 0-2.865 2.864c-1.103 1.103-1.103 2.891 0 3.993l-8.544-8.544-0.14-0.139c-1.102-1.103-1.102-2.891 0-3.993l3.477-3.477c1.147 1.922 4.501 5.685 8.072 9.296" fill="#4c65ba"/></g>
                <g transform="translate(379.58 231.57)"><path d="m0 0c-1.103-1.103-1.103-2.891 0-3.993l2.865-2.864c3.455 3.494 7.102 6.832 9.148 8.218l-3.329 3.329c-1.009 1.01-2.586 1.084-3.693 0.246-0.102-0.078-0.207-0.152-0.3-0.246z" fill="#4c65ba"/></g>
                <g clip-path="url(#clipPath822)" opacity=".42999"><g transform="translate(379.58 231.57)"><path d="m0 0c-1.103-1.103-1.103-2.891 0-3.993l2.865-2.864c3.455 3.494 7.102 6.832 9.148 8.218l-3.329 3.329c-1.009 1.01-2.586 1.084-3.693 0.246-0.102-0.078-0.207-0.152-0.3-0.246z" fill="#3e479b"/></g></g>
                <g transform="translate(445.18 180.97)"><path d="m0 0-52.012 52.577c-0.187 0.19-0.757-0.061-1.575-0.617-2.046-1.387-5.692-4.725-9.147-8.219-3.572-3.611-6.925-7.374-8.073-9.296-0.373-0.625-0.517-1.059-0.353-1.224l52.012-52.578c5.287-5.346 13.86-5.346 19.148 0 5.287 5.345 5.287 14.011 0 19.357" fill="#599af2"/></g>
                <g clip-path="url(#clipPath842)" opacity=".14"><g transform="translate(445.18 180.97)"><path d="m0 0-52.012 52.577c-0.7 0.708-6.627-4.601-11.716-9.848-4.33-4.464 58.44-67.432 63.728-62.086 5.287 5.345 5.287 14.011 0 19.357" fill="#3e479b"/></g></g>
                <g transform="translate(253.12 246.25)"><path d="m0 0h-170.97c-9.988 0-18.085 8.097-18.085 18.085s8.097 18.085 18.085 18.085h170.97c9.988 0 18.086-8.097 18.086-18.085s-8.098-18.085-18.086-18.085" fill="#fff"/>
                    <path d="m0 0h-27.807l-0.134 36.17h27.941c9.988 0 18.086-8.097 18.086-18.085s-8.098-18.085-18.086-18.085"
                          fill="#599af2"/></g>
                <g transform="translate(246.08 271.82)"><path d="m0 0c-3.259 0-5.911-2.651-5.911-5.911 0-3.259 2.652-5.91 5.911-5.91 1.579 0 3.063 0.614 4.18 1.731 1.116 1.116 1.731 2.6 1.731 4.179 0 3.26-2.652 5.911-5.911 5.911m0-13.821c-4.362 0-7.911 3.549-7.911 7.91 0 4.362 3.549 7.911 7.911 7.911s7.911-3.549 7.911-7.911c0-2.113-0.823-4.1-2.317-5.593-1.494-1.495-3.481-2.317-5.594-2.317" fill="#fff"/></g>
                <g transform="translate(257.21 253.71)"><path d="m0 0c-0.256 0-0.512 0.098-0.707 0.293l-6.276 6.276c-0.391 0.39-0.391 1.023 0 1.414s1.024 0.39 1.415 0l6.275-6.276c0.391-0.391 0.391-1.023 0-1.414-0.195-0.195-0.451-0.293-0.707-0.293" fill="#fff"/></g>
                <g transform="translate(255.56 208.88)"><path d="m0 0h-85.1c-5.955 0-10.783 4.828-10.783 10.784v7.071c0 5.978-4.846 10.824-10.824 10.824h-39.306c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.08 4.513 10.08 10.08v84.396c0 5.567-4.513 10.081-10.08 10.081" fill="#f28393"/></g>
                <g transform="translate(246.18 208.88)"><path d="m0 0h-85.099c-5.956 0-10.784 4.828-10.784 10.784v7.071c0 5.978-4.846 10.824-10.823 10.824h-39.307c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.081 4.513 10.081 10.08v84.396c0 5.567-4.514 10.081-10.081 10.081" fill="#f28393"/></g>
                <g clip-path="url(#clipPath882)" opacity=".12"><g transform="translate(246.18 208.88)"><path d="m0 0h-85.099c-5.956 0-10.784 4.828-10.784 10.784v7.071c0 5.978-4.846 10.824-10.823 10.824h-39.307c-5.977 0-10.823-4.846-10.823-10.824v-112.33c0-5.567 4.513-10.08 10.081-10.08h146.76c5.567 0 10.081 4.513 10.081 10.08v84.396c0 5.567-4.514 10.081-10.081 10.081" fill="#fff"/></g></g>
                <g clip-path="url(#clipPath898)" opacity=".12"><g transform="translate(224.6 208.88)"><path d="m0 0h-73.387c-5.136 0-9.3 4.828-9.3 10.784v7.071c0 5.978-4.179 10.824-9.334 10.824h-33.896c-5.155 0-9.334-4.846-9.334-10.824v-112.33c0-5.567 3.892-10.08 8.693-10.08h126.56c4.801 0 8.693 4.513 8.693 10.08v84.396c0 5.567-3.892 10.081-8.693 10.081" fill="#fff"/></g></g>
                <g transform="translate(97.208 197.65)"><path d="m0 0c-0.552 0-1 0.447-1 1v24.539c0 3.801 3.092 6.893 6.892 6.893h28.965c0.552 0 1-0.448 1-1 0-0.553-0.448-1-1-1h-28.965c-2.697 0-4.892-2.195-4.892-4.893v-24.539c0-0.553-0.448-1-1-1" fill="#fff"/></g></g></g></svg>
    <h1>This is a headline</h1>
    <p>loreLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo</p>
    <monster-button slot="action" class="monster-button-primary">Button</monster-button>
    <monster-button slot="action">Button</monster-button>
    `;
</monster-state>

Layout

The state control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-state::part(action) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

Log component

The log component can be used to display log messages in the browser.

If no log messages are displayed, then a status dialog appears.

As log messages are added, they are displayed in the log component.

log.addEntry(new Entry({
    message: "add some entries",
    date: "2020-01-01",
    title: "the first title",
    user: "the user",
}))

If you have only one message, you can add it with the log.addMessage(message, date) method.

log.addMessage("this is a log message", "2020-01-01");
// if no date is specified, the current date is used
log.addMessage("this is a log message");

Example

<monster-log id="my-log"></monster-log>

<script>
    const log = document.getElementById("my-log");

    log2.addEntry(new Entry({
      message:"add some entries",
      date: "2020-01-01",
      title: "the first title",
      user: "the user",
    }))
    log2.addEntry(new Entry({
      message:"I have been doing it" ,
      date: "2021-12-12 16:15:14",
      title: "next title",
      user: "administrator",
    }))
    log2.addEntry(new Entry({
      message:"an entrie that is very long ...",
      date: "2023-01-01 12:12:12",
      title: "this is the title",
      user: "a customer",
    }))

    log2.addMessage("this is a log message");
</script>

Notify Component

The notify component is a simple notification component.

Message

The notify message component is a simple notification message.

Usage

The notify component is a simple graphical display that specifies a notification.

Layout

The message control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-notify-message::part(remove) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

Notify

The notify component encapsulates the notify message component.

Usage

The notify component is a simple graphical display that specifies a notification.

Layout

The notify control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-notify::part(action) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.

Host Components

The host components are used to create a host for the application. The host is the main container for the web application. it offers several central functions, such as the loading configuration or the loading of the application translations.

Host

The simple host component is used to create a host for the application. The host is the main container for the web application. This component has no visual representation. It offers several central functions, such as the loading configuration or the loading of the application translations.

Usage

You can embed the host component in your HTML document with the following code.

<monster-host></monster-host>

To add a navigation and a notification area, you can use the following code.

<monster-host>
    <monster-overlay>
        <monster-reload data-monster-url="./nav.html"></monster-reload>
    </monster-overlay>
    <monster-notify></monster-notify>
</monster-host>

onReady

The onReady method can be used to execute code after the host component has been initialized.

const host = document.querySelector('monster-host');
host.onReady(() => {
    console.log('Host is ready');
});

FocusManager

The host component offers a interface to the focus manager. The focus manager is used to manage the focus of the application.

const host = document.querySelector('monster-host');
host.focusManager.focusNext();

ResourceManager

The host component offers a interface to the resource manager. The resource manager is used to load resources such as translations or configuration files.

const host = document.querySelector('monster-host');
host.resourceManager.addStylesheet('https://example.com/style.css');

Translations

The has a interface to get the locale of the application. The locale is used to load the translations of the application.

const host = document.querySelector('monster-host');
host.locale 
// ↦ 'de'

The translations hold the translations of the application.

const host = document.querySelector('monster-host');
host.translations
// ↦ ...

Notifications

With the Host.pushNotification("example") method, you can add a notification to the notification area. The notification area is defined in the HTML document.

To use the notification area, you have to add the following code to your HTML document.

<monster-host>
    <monster-notify></monster-notify>
</monster-host>

Layout

The host control has no visual representation.

Overlay

The overlay component is used to display a modal dialog. It is used by the host component to display the login dialog. Im Standard wird oben links, absolute positioniert, ein Button angezeigt, der das Overlay öffnet. Das Overlay kann auch über den Aufruf der Methode open() geöffnet werden.

Usage

Overlay component allows user to display a modal dialog:

// create element
const select = document.createElement('monster-overlay');

// insert element into the DOM
document.getElementById('body').appendChild(select);

Overlay-Content

The content of the overlay can be set via slotted content. The content is displayed in the body of the overlay. In this example, the content is a simple text.

<monster-overlay>
    <p>I am the content of the overlay.</p>
</monster-overlay>

It is also possible to load the content from an external file. For this purpose, the reload component is used.

<monster-overlay>
    <monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-overlay>

Multiple Overlay-Content

It is also possible to embed multiple overlays. The buttons are positioned absolute, therefore the containing div must be positioned relative.

    <div style="position:relative">
    <monster-overlay>
        <monster-reload data-monster-url="./nav.html"></monster-reload>
    </monster-overlay>
</div>

<div style="position:relative">
    <monster-overlay>
        <p>I am the content of the overlay.</p>
    </monster-overlay>
</div>

Events

The following events are fired by the component.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

To change the color of the open button, the following CSS can be used.

monster-overlay::part(open) {
    border: 1px solid red;
}

The result is shown in the following picture.

The individual parts are shown in the following picture.

Call Button

The call button component can be used to call a function of a component. The function is called when the button is clicked.

Usage

The call button component search an element with the given reference and calls the function with the given name.


<div id="my-function-host"></div>
<script type="module">
    document.getElementById('my-function-host').myFunction = function () {
        console.log('myFunction called');
    }
</script>
<monster-call-button data-monster-reference="#my-function-host" data-monster-call="myFunction">
    call myFunction
</monster-call-button>

Layout

The call control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

Details

The details component allows you to display a summary and a detailed description.

Usage

Details component can be used to display a summary and a detailed description.

// create element
const details = document.createElement('monster-details');

// insert element into the DOM
document.getElementById('body').appendChild(details);

In order to display the summary, the attribute data-monster-button-label must be set.

Details-Content

The content of the overlay can be set via slotted content. The content is displayed in the body of the summary. In this example, the content is a simple text.

<monster-details>
    <p>I am the content of the overlay.</p>
</monster-details>

It is also possible to load the content from an external file. For this purpose, the reload component is used.

<monster-details>
    <monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-details>

Accordion

Combine multiple details into one Accordion.

<monster-details>
    <div>lorem ipsum dolor st amet, consteitur sadpselit, sed dam noum eiimocie naboeyminvit ut </div>
</monster-details>
<monster-details>
    <div>ineimad  imnimevinam,  qusi nostrud exerci tation ullacmorper susicpti lobrotis nsil uta lquiip</div>
</monster-details>

If you do not want to use the accordion, you can set the feature flag features.accordion to false.

Events

The following events are fired by the component.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

To change the color of the open button, the following CSS can be used.

details::part(container) {
    border: 1px solid red;
}

The individual parts are shown in the following picture.

Toggle Button

The toggle button component is a special button that can be used to toggle between two states. The button is derived from the call button component and can be used in the same way.

Usage

The toggle button component search an element with the given reference and calls the function toggle. This is very helpful in combination with the collapse component.

<monster-collapse id="my-collapse">
  <monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-collapse>

<monster-call-button data-monster-reference="#my-collapse">
    toggle
</monster-call-button>

Layout

The toggle control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

Collapse

The collapse component allows you to display a a detailed description. The description is hidden by default and can be displayed by clicking on a button. The button is not part of the component. It must be created by the user.

Usage

Collapse component can be used to display a detailed description. The description is hidden by default.

// create element
const collapse = document.createElement('monster-collapse');

// insert element into the DOM
document.getElementById('body').appendChild(collapse);

Details-Content

The content of the details is defined by the user. The content can be defined as a child element of the collapse component.


<monster-collapse>
    <p>I am the content of the overlay.</p>
</monster-collapse>

It is also possible to load the content from an external file. For this purpose, the reload component is used.


<monster-collapse>
    <monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-collapse>

Accordion

Combine multiple details into one Accordion.


<monster-collapse>
    <div>lorem ipsum dolor st amet, consteitur sadpselit, sed dam noum eiimocie naboeyminvit ut</div>
</monster-collapse>
<monster-collapse>
    <div>ineimad imnimevinam, qusi nostrud exerci tation ullacmorper susicpti lobrotis nsil uta lquiip</div>
</monster-collapse>

If you do not want to use the accordion, you can set the feature flag features.accordion to false.

Events

The following events are fired by the component.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

Datatable Components

The datatable component is a component that allows you to display data in a table.

Datatable

The datatable component is a component that allows you to display data in a table. The datatable is build with the css grid system and is therefore very flexible.

Installation

To install the Monster-Datatable custom control, run the following command:

Usage

npm i @schukai/component-datatable

Registering the Control

To register the control, import the datatable.mjs file:

import "@schukai/component-datatable/source/datatable.mjs";

This will create an empty datatable without any columns or data.

Adding Columns

To add columns, insert a template with an ID:

<monster-datatable>
    <template id="this-is-a-row-id">
        <div data-monster-mode="fixed" data-monster-sortable="oid" data-monster-head="OID">
            <a data-monster-attributes="href path:this-is-a-row-id.oid | tostring | prefix:#"
               data-monster-replace="path:this-is-a-row-id.oid | tostring">Link</a>
        </div>
        <div>
            <button data-monster-replace="static:doit">Click</button>
        </div>
    </template>
</monster-datatable>

The top-level div elements in the template define the columns.
The template’s ID must be used in the path: attribute.

Header Attributes

data-monster-mode="fixed": Specifies that the column cannot be removed or hidden.
data-monster-attributes="href path:this-is-a-row-id.oid | tostring | prefix:#": Adds an href attribute to the element with the value from this-is-a-row-id.oid. The value is passed through the pipe | to tostring and converted to a string. Then, the prefix # is added.
data-monster-replace: Replaces the child nodes of an element with the value from the specified path.
data-monster-sortable="number": Indicates that the column is sortable by the number property.
data-monster-head="Number": Sets the header for the column to the specified name (e.g., “Number”).

Control Options

The Monster-Datatable control accepts various options in the form of a JSON object:

{
  "templates": {
    "main": getTemplate(),
            "emptyState": getEmptyTemplate()
  },
  "datasource": {
    "selector": null
  },
  "mapping": {
    "data": "dataset"
  },
  "data": [],
          "headers": [],
          "responsive": {
    "breakpoint": 800
  },
  "labels": {
    "theListContainsNoEntries": "The list contains no entries"
  },
  "features": {
    "settings": true,
            "footer": true
  },
  "templateMapping": {
    "row-key": null,
            "filter-id": null
  }
}

Here is a description of each option:

templates: An object that specifies the main template and the empty state template.
- main: The main template for the datatable, usually provided by a function such as getTemplate().
- emptyState: The template to display when the datatable has no data, usually provided by a function such as getEmptyTemplate().
datasource: An object that defines the datasource for the datatable.
- selector: The selector for the datasource, set to null by default.
mapping: An object that maps the datatable properties.
- data: Maps the property name for the dataset, default is “dataset”.
data: An array of data objects for the datatable.
headers: An array of header objects for the datatable.
responsive: An object that defines responsive behavior for the datatable.
- breakpoint: The pixel width at which the datatable switches to responsive mode, default is 800.
labels: An object that defines labels for the datatable.
- theListContainsNoEntries: The label to display when the datatable has no data, default is “The list contains no entries”.
features: An object that enables or disables certain datatable features.
- settings: Enables or disables the settings feature, default is true.
- footer: Enables or disables the footer feature, default is true.
templateMapping: An object that defines template mapping properties.
- row-key: The row key mapping, set to null by default.
- filter-id: The filter ID mapping, set to null by default.

You can also add a footer to the Monster-Datatable by including a div element with a slot=“footer” attribute. Here’s the updated section of the guide:

To add a footer to the Monster-Datatable, insert a div element with the slot=“footer” attribute and the desired content:

<div slot="footer" class="monster-button-group">
    <monster-button>Aktion 1</monster-button>
    <monster-button>Aktion 2</monster-button>
    <monster-button>Aktion 3</monster-button>
</div>

This example creates a footer with a button group containing three buttons labeled “Aktion 1”, “Aktion 2”, and “Aktion 3”. Customize the footer content as needed for your specific use case.

Adding a Pagination Control

To add a pagination control to the Monster-Datatable, insert a div element with the slot=“bar” attribute and a monster-embedded-pagination element:

<div slot="bar" class="monster-button-group">
  <monster-embedded-pagination
          data-monster-datasource-selector="#data1"></monster-embedded-pagination>
</div>

This example adds a pagination control that uses a datasource selector with the ID data1. Customize the datasource selector and other attributes as needed for your specific use case.

Adding a Filter Button and Filter Area

To add a filter button and a filter area to the Monster-Datatable, insert a monster-datatable-filter-button element within the div element with the slot="bar" attribute:

<div slot="bar" class="monster-button-group">
    <monster-embedded-pagination
        data-monster-datasource-selector="#data1"></monster-embedded-pagination>

    <monster-datatable-filter-button data-monster-reference="#my-collapse" data-monster-role="filter-button">Filter</monster-datatable-filter-button>
</div>

This filter button opens a section that contains a filter when clicked. Define the filter area using a monster-collapse element with the appropriate ID and a data-monster-role=“filter-collapse” attribute:

<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
  <div class="flex">
    <monster-datatable-filter id="listfilter1" slot="filter">
      <label data-monster-label="OID" data-monster-template="${value | call:range:oid}" style="display:none">OID <input name="value" type="text"></label>
    </monster-datatable-filter>
  </div>
</monster-collapse>

This example creates a filter area with an input field for filtering by “OID”. Customize the filter area and other attributes as needed for your specific use case.

Adding Data

The datatable component needs a datasource to get the data that should be displayed in the table. The datasource can be configured via the data-monster-datasource-selector attribute. The value of the attribute is a css selector that points to the datasource component.


<monster-datatable data-monster-datasource-selector="#data1"></monster-datatable>

Overview

Argument	Type	Description
`id`	string	The id of the datatable (necessary for saving the configuration).
`data-monster-datasource-selector`	string	The selector of the datasource component.
`data-monster-responsive-breakpoint`	string	The breakpoint at which the table should be responsive.

Columns

The columns of the datatable are defined via a template element. The template element must have the id attribute with the value row.

Every column is defined via a div element. The div element can configure the following attributes:

The headlines of the table are defined via the data-monster-head attribute. The value of the attribute is a json


<div data-monster-head="ID"></div>

The columns of the data table can be localized. For this purpose, the prefix i18n: must be specified in the title attributes data-monster-head.


<div data-monster-head="i18n:myKey"></div>

The alignment of the column is defined via the data-monster-align attribute. The value of the attribute is a css.


<div data-monster-align="center"></div>

When a column is sortable, the data-monster-sortable attribute must be set. The value of the attribute is the name of the column in the datasource.


<div data-monster-sortable="id"></div>

The mode of the datatable can be set via the data-monster-mode attribute. The value of the attribute is a string that can be fixed, visible or hidden. The default value is visible.


<div data-monster-mode="fixed"></div>

Fixed means that the column is always visible. Visible means that the column is visible as long as nothing else has been configured. Hidden means that the column is hidden as long as nothing else has been configured.

The visibility of the columns can be specified when defining the table. The user can show and hide all non-fixed columns.

The settings can be stored in the client if a monster-host component is available on the page.

The data is stored in the indexedDB. Additionally, the datatable needs an ID. This is set via the attribute ‘id’.


<monster-datatable id="my-table"></monster-datatable>

The localization is done via the i18n functions of the monster library.

Overview

Argument	Type	Default	Description
`data-monster-head`	string	index of column	The headline of the column.
`data-monster-grid-template`	string	`1fr`	The css grid template for the column. it is important that the column has a fraction unit.
`data-monster-align`	string	`start`	The css grid align for the column. Valid values are `start`, `center` and `end`.
`data-monster-sortable`	string		The name of the column in the datasource.
`data-monster-mode`	string	`visible`	The mode of the column. Valid values are `fixed`, `visible` and `hidden`.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

#select1::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.

Datatable Filter

The <monster-datatable-filter> HTML control is used to define filters for a data table. Within the control, you can create one or more labels, each representing a filter. These labels must be placed inside the control and can include any HTML controls.

Here is an example of a <monster-datatable-filter> control:

<monster-datatable-filter  id="my-filter" slot="filter">
    <label data-monster-label="OID" 
           data-monster-template="${value | call:range:oid}" style="display:none">
      OID <input name="value" type="search"></label>
</monster-datatable-filter>

This defines a filter that can be used to filter data by OID. The filter is hidden by default, but can be selected from the dropdown menu in the data table. The following image shows the filter.

Defining Filter Names

The data-monster-label attribute is used to specify the name of the filter as it will appear in the dropdown menu where users can select filters. In the example above, the data-monster-label attribute is set to “OID”.

Creating Query Parts with Data-Monster-Template

The data-monster-template attribute is used to define how the key and input value are combined to create a query part. For example, using data-monster-template="oid=${value}" and entering the value 1425 would result in the query oid=1425.

In the example provided, the data-monster-template attribute is set to "${value | call:range:oid}", which calculates a range. If a user enters “1425-1430”, the resulting query would be oid>=1425 AND oid<=1430.

This expression takes the input range and converts it into a query that includes both the lower and upper bounds of the range.

Hiding the Filter by Default

The style="display:none" attribute is used to hide the filter initially. This ensures that the filter is not visible until the user selects it from the dropdown menu.

Positioning the Filter in the Data Table

To position the filter within the filter area of the data table, you can include the slot="filter" attribute. This attribute ensures that the filter is displayed in the correct location within the data table.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

Dataset

The dataset component is a component that allows you to display a data row from a datasource.

Usage

The dataset component needs a datasource to get the data that should be displayed in the table. The datasource can be configured via the data-monster-datasource-selector attribute. The value of the attribute is a selector that points to the datasource component.


<monster-dataset data-monster-datasource-selector="#data1"></monster-dataset>

Overview

Argument	Type	Default	Description
`data-monster-index`	string	0	The index of the row in the datasource.
`data-monster-datasource-selector`	string		The selector of the datasource component.

Pagination

The dataset pagination component is a component that can be used to paginate the data that is displayed in a datatable component.

Usage

The pagination component needs a datasource to get the data that should be used to calculate the pagination. The datasource can be configured via the data-monster-datasource-selector attribute. The value of the attribute is a selector that points to the datasource component.


<monster-pagination data-monster-datasource-selector="#datasource"></monster-pagination>

Embedded Pagination

The embedded dataset pagination component is a component that can be used to paginate the data that is displayed in a datatable component. It is derived from the pagination component and can be used in the same way. The only difference is that it has an embedded style.

Usage


<monster-embedded-pagination data-monster-datasource-selector="#datasource"></monster-embedded-pagination>

Datatable Example

The following example shows how to use the datatable component to display data from a REST API.

The rest api is a Monster component that allows you to make REST calls to a REST API.


<script id="id-for-this-config" type="application/json">
    {
        "read": {
            "url": "https://example.com/api/commerce/orders/search?page=${page}",
            "init": {
                "method": "GET",
                "headers": {
                    "Authorization": "Basic secret",
                    "Accept": "application/json"
                }
            },
            "credentials": "include"
        }
    }

</script>
<monster-datasource-rest id="data1" data-monster-options-selector="#id-for-this-config"></monster-datasource-rest>

After the datasource is configured, the datatable can be configured. The reference to the datasource is made via the data-monster-datasource-selector attribute.

The headlines of the table are defined via the data-monster-head attribute. If no value is defined, the number of the column is used as the headline.

The grid template width is defined via the data-monster-grid-template attribute. The default value is 1fr.

With the data-monster-align attribute, the alignment of the content can be defined. Values are start, center and end. Additionally, the alignment should be defined in the CSS class for the column.


<monster-datatable data-monster-datasource-selector="#data1">
    <template id="row">
        <div data-monster-head="OID" data-monster-grid-template="1fr"
             data-monster-replace="path:row.oid | tostring | prefix:<a href=/> | suffix:</a>"></div>
        <div data-monster-head="ERP" data-monster-replace="path:row.erpCreation"></div>
        <div class="center" data-monster-align="center" data-monster-replace="path:row.orderState"></div>
        <div class="end" data-monster-align="end"
             data-monster-replace="path:row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
        <div data-monster-replace="path:row.orderState"></div>
        <div data-monster-replace="static:this is a static value"></div>
    </template>
</monster-datatable>

If you want to use the i18n component, you can define the translations in a script tag with the data-monster-role attribute.


<script type="application/json" data-monster-role="translations">
    {
        "head1": "Headline 1",
        "head2": "Headline 2",
    }

</script>

In the html template, the data-monster-head attribute is used to define the location of the headline.


<template id="row">
    <div data-monster-head="i18n:head1"></div>
    <div data-monster-head="i18n:head2"></div>
</template>

And now the datatable is ready to use. The pagination can be used to load more data. The reference to the datasource is made via the data-monster-datasource-selector attribute.


<monster-pagination data-monster-datasource-selector="#data1"></monster-pagination>

You also need to include the javascript and css files for the datatable component.

import "@schukai/component-datatable/source/datasource/rest.mjs";
import "@schukai/component-datatable/source/pagination.mjs";
import "@schukai/component-datatable/source/datatable.mjs";

The datatable component uses the following css classes.

import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/table.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/badge.pcss";
import "@schukai/component-style/source/style/link.pcss";
import "@schukai/component-style/source/style/data-grid.pcss";
import "@schukai/component-style/source/style/property.pcss";

Style

The CSS Style guide for Monster is a set of guidelines and best practices for writing and organizing CSS code. It is designed to help developers maintain a consistent and organized codebase, making it easier to read, understand, and modify. The style guide covers a wide range of topics, including naming conventions, code organization, and performance optimization. Following the guidelines in this style guide will help ensure that your CSS code is clean, maintainable, and efficient.

The following example shows how to include the stylesheets independently of the rest of the document.

<!-- here we define the desired content -->
<template id="contenttemplate">
    <p>this is an example</p>
</template>

<script type="module">

// here we import the stylesheets
import {NormalizeStyleSheet} from '@schukai/[email protected]/source/stylesheet/normalize.mjs';
import {PropertyStyleSheet} from '@schukai/[email protected]/source/stylesheet/property.mjs';
import {ColorStyleSheet} from '@schukai/[email protected]/source/stylesheet/color.mjs';
import {ThemeStyleSheet} from '@schukai/[email protected]/source/stylesheet/theme.mjs';

// we create a node
const node = document.createElement('div');

// we attach the shadow root to the node
const shadow = node.attachShadow({ mode: 'open' });

// we clone the template and attach it to the shadow root
const template = document.getElementById('contenttemplate');
shadow.appendChild(template.content.cloneNode(true));
 
// we attach the stylesheets to the shadow root
shadow.adoptedStyleSheets = [NormalizeStyleSheet, PropertyStyleSheet,ColorStyleSheet, ThemeStyleSheet];

// we attach the node to the body
document.body.appendChild(node);

</script>

Color

Color Properties

References

designsystem.digital.gov/design-tokens/color/overview/

Badge

Button

Button group

A button group is a vertical list of buttons. It is used to group buttons together.

<div class="monster-button-group">
    <button class="">button</button>
    <button class="monster-button-outline-primary">monster-button-outline-primary</button>
</div>

Button bar

A button bar is a horizontal list of buttons. It is used to group button groups together.

<div class="monster-button-bar">
    <div class="monster-button-group">
        <button class="">button</button>
        <button class="monster-button-outline-primary">monster-button-outline-primary</button>
    </div>
    <div class="monster-button-group monster-margin-start-4">
        <button class="monster-button-outline-secondary">monster-button-outline-secondary</button>
        <button class="monster-button-outline-tertiary">monster-button-outline-tertiary</button>
    </div>
</div>

Cards

A card is a flexible and extensible content container.

    <div class="cards">
        <div class="card">
            <img src="./bg.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <button>button</button>
        </div>
        <div class="card">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <button>button</button>
        </div>
        <div class="card">
            <button>button</button>
            <img src="./bg.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <button>button</button>
        </div>
        <div class="card">
            <h1>Lorem ipsum </h1>
            <button>button</button>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <button>button</button>
        </div>
    </div>

Typography

This page is a demonstration of the elements that can be formatted using Monster. It is not intended to be a comprehensive guide to typography, but rather a reference of the styles that are available.

Table

Name	Number
Jackie	012345
Lucy	112346
David	493029
Kerry	395499
Steve	002458

Form

Space (margin, padding)

CSS-Properties

Class	Value
`--monster-space-0`	0
`--monster-space-1`	2px
`--monster-space-2`	4px
`--monster-space-3`	6px
`--monster-space-4`	10px
`--monster-space-5`	16px
`--monster-space-6`	26px
`--monster-space-7`	42px

Classes

monster-margin-<0, 1, 2, 3, 4, 5, 6, 7>
monster-padding-<0, 1, 2, 3, 4, 5, 6, 7>
monster-margin-<start, end, top, bottom>-<0, 1, 2, 3, 4, 5, 6, 7>
monster-padding-<start, end, top, bottom>-<0, 1, 2, 3, 4, 5, 6, 7>

Examples


<div class="monster-padding-5"></div>
<div class="monster-padding-start-5"></div>

Level (z-index)

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

CSS-Properties

Property
`--monster-z-index-default`
`--monster-z-index-outline`
`--monster-z-index-dropdown`
`--monster-z-index-dropdown-overlay`
`--monster-z-index-sticky`
`--monster-z-index-sticky-overlay`
`--monster-z-index-fixed`
`--monster-z-index-fixed-overlay`
`--monster-z-index-modal-backdrop`
`--monster-z-index-modal-backdrop-overlay`
`--monster-z-index-offcanvas`
`--monster-z-index-offcanvas-overlay`
`--monster-z-index-modal`
`--monster-z-index-modal-overlay`
`--monster-z-index-popover`
`--monster-z-index-popover-overlay`
`--monster-z-index-tooltip`
`--monster-z-index-tooltip-overlay`

Media Queries

Media queries are used to apply different styles to a document depending on the size of the screen. Media queries are defined in the @media rule. The @media rule is used inside a style sheet to apply different styles for different media types/devices.

More information about media queries can be found on MDN.

In Monster we use the following media queries:

Class	From	To
`viewport0`	0	480px
`viewport-4`	0	480px
`viewport-7`	0	768px
`viewport-9`	0	992px
`viewport-12`	0	1200px
`viewport4`	480px	∞
`viewport7`	768px	∞
`viewport9`	992px	∞
`viewport12`	1200px	∞
`viewport4-7`	480px	768px
`viewport7-9`	768px	992px
`viewport9-12`	992px	1200px

In the following graphic you can see the different media queries and the corresponding mixins.

Spinner

The spinner is a CSS class that provides a loading animation.