Navigation Back to home

State

A compact state indicator for statuses such as success, warning, error or informational workflow state.

Import
the javascript logo
import { State } from "@schukai/monster/source/components/state/state.mjs";
Source
the git logo
Package
the npm logo
Since
1.5.0
There is nothing to show here.

Introduction

The Monster State component is a compact visual indicator for workflow status. Use it when success, warning, error or neutral progress information should be recognizable without a full message block.

When to use State

  • Use it for compact status display: Useful in logs, cards, summaries and dashboards.
  • Use it when visual classification matters: State tokens communicate meaning quickly.
  • Do not use it as the only explanation for complex failures: A state indicator may need supporting text nearby.

State

In this example, you can see a state control with a visual and a text. The assignment is made via the attribute slot.

There is nothing to show here.

Javascript

import '@schukai/monster/source/components/state/state.mjs';<script type="module">import '@schukai/monster/source/components/state/state.mjs';</script>

HTML

<monster-state>
    <div part="visual">
        <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
             xmlns="http://www.w3.org/2000/svg">
            <path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
            <path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
            <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
        </svg>
    </div>
    <div part="content">
        There is nothing to show here.
    </div>
</monster-state>

Stylesheet

/** no additional stylesheet is defined **/
Open in playground

Actionable Empty State

This example turns monster-state into an actionable empty state with a visual marker, a decision text, and a follow-up button.

📦
No shipping profile is configured for this warehouse yet.
Create profileWaiting for action

Javascript

import "@schukai/monster/source/components/state/state.mjs";
import "@schukai/monster/source/components/form/button.mjs";

const button = document.getElementById("state-actionable-demo-button");
const status = document.getElementById("state-actionable-demo-status");

button.setOption("actions.click", () => {
  status.textContent = "Profile creation flow started";
});<script type="module">import "@schukai/monster/source/components/state/state.mjs";
import "@schukai/monster/source/components/form/button.mjs";

const button = document.getElementById("state-actionable-demo-button-run");
const status = document.getElementById("state-actionable-demo-status-run");

button.setOption("actions.click", () => {
  status.textContent = "Profile creation flow started";
});</script>

HTML

<monster-state>
  <div slot="visual" style="font-size:3rem;line-height:1;">📦</div>
  <div slot="content">
    No shipping profile is configured for this warehouse yet.
  </div>
  <div slot="action">
    <monster-button id="state-actionable-demo-button">Create profile</monster-button>
    <span id="state-actionable-demo-status" style="margin-left:0.75rem;">Waiting for action</span>
  </div>
</monster-state>

Stylesheet

/** no additional stylesheet is defined **/
Open in playground

Code Design

This code implements a custom web component named State, leveraging the Shadow DOM to encapsulate its internal structure and styling. This prevents external styles or scripts from inadvertently affecting the internal functionality of the component.

Shadow DOM and Accessibility

The code uses Shadow DOM to ensure design consistency and protect the component’s structure from external interference. Encapsulation improves maintainability while allowing flexible content insertion through slots.

Customization with Exported Parts

Exported parts such as control, visual, content, and action enable targeted customization through CSS. This ensures a clear separation between the component's internal logic and the customizations applied by developers.

Available Part Attributes

  • control: The container for the component's main control area.
  • visual: The section for visual content, such as SVGs or images.
  • content: The primary content area of the component, including text or paragraphs.
  • action: Interactive elements like buttons or other controls.

CSS Integration

The code includes several CSS modules for styling, such as display.pcss, border.pcss, and specific mixin files. These ensure consistent design patterns and reusable styling.

Accessibility

The component adheres to accessibility standards, including support for keyboard navigation and screen readers, ensuring an inclusive user experience.

HTML Structure

<monster-state></monster-state>

JavaScript Initialization

const element = document.createElement('monster-state');
document.body.appendChild(element);

Exported

State

Derived from

CustomControl

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.

Option
Type
Default
Description
templates
object
Template definitions
templates.main
string
undefined
Main template
object
content
content.visual
string
<slot name="visual"></slot>
Visual content
content.content
string
<slot></slot>
Content
content.action
string
<slot name="action"></slot>
Action

  • since
  • deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.

  • data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
  • data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.

Static methods

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
getTag()
Returns
  • {string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()
Returns
  • {void}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.