Navigation Back to home

ContextError

A context error control

Import
the javascript logo
import { ContextError } from "@schukai/monster/source/components/form/context-error.mjs";
Source
the git logo
Package
the npm logo
Since
3.55.0
This is an error message

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

  • Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
  • Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
  • Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
  • Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
  • Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Context Error Simple

Javascript

/** this example does not use an extra script **/

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The monster-context-error component is designed to display error messages in a flexible and visually appealing popper (popover). It uses the Shadow DOM for isolation, ensuring that its internal structure and styles remain independent of the global DOM.

The component combines an icon-based trigger with a dynamically positioned popper to provide contextual error information. It supports various customization options, including error message display duration, interaction modes, and placement configuration.

Shadow DOM and Structure

The monster-context-error component encapsulates its behavior and design using the Shadow DOM. The key internal elements include:

  • Control Container: The wrapper element for the component.
  • Error Icon: A hidden SVG icon that appears when an error message is set.
  • Popper: A container for the error message content, dynamically positioned based on configuration.

The use of part attributes allows developers to customize the component's appearance without breaking its internal structure.

Customizing Through Exported Parts

The monster-context-error component exposes several parts for styling. These parts can be targeted using CSS for custom themes and designs:

  • control: Targets the main wrapper element of the component.
  • button: Styles the clickable error icon.
  • popper: Controls the appearance of the error message popper.
  • content: Targets the inner content section of the popper where the error message is displayed.

Example Custom Styling


monster-context-error::part(button) {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

monster-context-error::part(popper) {
    background-color: #fce4e4;
    color: #d32f2f;
    border: 1px solid #d32f2f;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

monster-context-error::part(content) {
    font-size: 14px;
    font-weight: 500;
}

Explanation:

  • monster-context-error::part(button): Customizes the error icon button with pointer interactions.
  • monster-context-error::part(popper): Styles the error message container with a red border and soft background.
  • monster-context-error::part(content): Adjusts the text size and weight for readability.

Error Message Display

The monster-context-error component provides methods to manage error messages dynamically. The error icon becomes visible when an error message is set. Developers can control the behavior of the message display, including:

  • Immediate Display: Show the error message instantly.
  • Timed Display: Display the message for a specified duration.
  • Reset: Hide and clear the error message.

Accessibility

The monster-context-error component is built with accessibility in mind:

  • The error icon supports focus states for keyboard navigation.
  • The popper content is screen-reader accessible and dynamically updated.
  • ARIA roles and attributes are used to ensure proper semantic meaning for assistive tools.

Summary

The monster-context-error component provides a lightweight and highly customizable solution for displaying contextual error messages. With its Shadow DOM isolation, exported parts for styling, and dynamic behavior, it seamlessly integrates into forms or any UI requiring inline error feedback.

HTML Structure

<monster-context-error></monster-context-error>

JavaScript Initialization

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

Exported

ContextError

Derived from

Popper

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 Popper.

Option
Type
Default
Description
templates
object
The templates for the control.
templates.main
string
undefined
The main template.
mode
string
auto
The mode of the popper. Possible values are `click`, `enter` and `hover`.
content
string
<slot></slot>
The content of the popper.
popper
object
undefined
The popper options.
popper.placement
string
undefined
The placement of the popper. Possible values are `top`, `bottom`, `left`, `right`, `auto`, `auto-start`, `auto-end`, `top-start`, `top-end`, `bottom-start`, `bottom-end`, `right-start`, `right-end`, `left-start`, `left-end`.

  • 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 Popper.

  • 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 Popper.

Behavioral methods

hideDialog()
Returns
  • {ContextError}
resetErrorMessage()
Returns
  • {ContextError}
Reset the error message.
showDialog()
Returns
  • {ContextError}

State query methods

hasErrorMessage()
Returns
  • {boolean}
Returns true if an error message is set.

Structural methods

setErrorMessage(message,{boolean|number|string})
Parameters
  • message: message
  • {boolean|number|string} {show}: - If true the dialog is shown immediately. If false the dialog is hidden by default. If a number is specified the dialog is shown for the specified time in milliseconds.
Returns
  • {ContextError}

Static methods

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

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.