@schukai/monster
Version:
Monster is a simple library for creating fast, robust and lightweight websites.
113 lines (103 loc) • 3.71 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.
*/
import { instanceSymbol } from "../../constants.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
import { CustomElement } from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
registerCustomElement,
} from "../../dom/customelement.mjs";
import { KpiTileStyleSheet } from "./stylesheet/kpi-tile.mjs";
import { AccessibilityStyleSheet } from "../stylesheet/accessibility.mjs";
export { KpiTile };
/**
* A KPI Tile Control
*
* @fragments /fragments/components/data/kpi/tile/
*
* @example /examples/components/data/kpi/tile-simple
* @example /examples/components/data/kpi/tile-with-labels
*
* @since 4.38.0
* @copyright Volker Schukai
* @summary A KPI Tile Control that displays key performance indicators in a tile format.
*/
class KpiTile extends CustomElement {
static get [instanceSymbol]() {
return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
}
/**
* @returns {symbol}
* @summary Returns the instance symbol for the KPI Tile control.
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
return this;
}
/**
* To set the option via the HTML Tag use the attribute `data-monster-options-`
* with the name of the option.
*
* @property {Object} templates
* @property {string} templates.main The main template for the KPI Tile control.
* @property {Object} values
* @property {string} values.main The main value displayed in the tile.
* @property {string} values.small The small value displayed in the tile.
* @property {string} values.top The top value displayed in the tile.
* @property {string} values.bottom The bottom value displayed in the tile.
* @returns {Object}
* @summary Returns the default options for the KPI Tile control.
*/
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
values: {
main: null,
small: null,
top: null,
bottom: null,
},
});
}
/**
* @returns {string}
* @summary Returns the role of the control.
*/
static getTag() {
return "monster-kpi-tile";
}
/**
* @returns {string}
* @summary Returns the role of the control.
*/
static getCSSStyleSheet() {
return [KpiTileStyleSheet, AccessibilityStyleSheet];
}
}
/**
* @private
* @returns {string}
* @summary Returns the template for the KPI Tile control.
*/
function getTemplate() {
return `
<div data-monster-role="control" part="control">
<div class="top" data-monster-role="top" part="top" data-monster-replace="path:values.top">—</div>
<div data-monster-role="main" part="main" data-monster-replace="path:values.main">—</div>
<div style="width: 100%; height: 0;" part="divider"></div>
<div data-monster-role="small" part="small" data-monster-replace="path:values.small">—</div>
<div data-monster-role="bottom" part="bottom" data-monster-replace="path:values.bottom">—</div>
</div>`;
}
registerCustomElement(KpiTile);