@schukai/monster
Version:
Monster is a simple library for creating fast, robust and lightweight websites.
118 lines (106 loc) • 3.79 kB
JavaScript
/**
* Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact Volker Schukai.
*
* SPDX-License-Identifier: AGPL-3.0
*/
import { instanceSymbol } from "../../constants.mjs";
import { registerCustomElement } from "../../dom/customelement.mjs";
import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
import { ContextBase } from "./context-base.mjs";
export { ContextNote };
/**
* A context note control.
*
* @fragments /fragments/components/form/context-note
*
* @since 3.55.0
* @copyright Volker Schukai
* @summary A context note control
*/
class ContextNote extends ContextBase {
/**
* This method is called by the `instanceof` operator.
* @return {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for(
"@schukai/monster/components/form/context-note@@instance",
);
}
/**
* To set the options via the HTML tag, the attribute `data-monster-options` must be used.
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
*
* The individual configuration values can be found in the table.
*
* @property {Object} templates - The templates for the control.
* @property {string} templates.main - The main template.
* @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
* @property {string} content - The content of the popper.
* @property {object} popper - The popper options.
* @property {string} popper.placement - The placement of the popper.
* @property {Object} classes - Custom CSS classes.
* @property {string} classes.button - CSS class for the button element.
*/
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
mode: "auto",
classes: {
button: "monster-theme-secondary-2",
},
});
}
/**
* @return {string}
*/
static getTag() {
return "monster-context-note";
}
/**
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [ContextHelpStyleSheet, ThemeStyleSheet];
}
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<div data-monster-role="button"
data-monster-attributes="class path:classes.button"
part="button"><svg class="hidden"
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
fill="currentColor"
viewBox="0 0 16 16">
<path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/>
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
</svg></div>
<div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
<div data-monster-role="arrow"></div>
<div part="content" class="flex">
<slot></slot>
</div>
</div>
</div>
`;
}
registerCustomElement(ContextNote);