@duetds/components/lib/esm/duet-definition-list.entry.js

This package includes Duet Core Components and related tools.

import { r as registerInstance, h, c as getElement } from './core-12b6bfe8.js';

const DuetDefinitionList = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Theme of the definition list. Can be one of: "default", "turva".
         */
        this.theme = "";
        /**
         * Controls the margin of the component. Can be one of: "auto", "none".
         */
        this.margin = "auto";
        /**
         * Style variation of the definition list. Can be one of: "default", "striped".
         */
        this.variation = "default";
    }
    /**
     * Component lifecycle events.
     */
    componentWillLoad() {
        if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
            this.theme = "turva";
        }
    }
    /**
     * Local methods
     */
    hasValidItems(array) {
        return Array.isArray(array);
    }
    /**
     * render() function
     * Always the last one in the class.
     */
    render() {
        return (h("dl", { class: {
                "duet-definition-list": true,
                "duet-m-0": this.margin === "none",
                [this.variation]: true,
                "duet-theme-turva": this.theme === "turva",
            } }, this.hasValidItems(this.items)
            ? this.items.map((item) => (h("div", { class: "duet-definition-list-row" }, h("dt", null, item["label"]), h("dd", null, item["value"]))))
            : ""));
    }
    get element() { return getElement(this); }
    static get style() { return ":host{display:block}.duet-definition-list,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%}.duet-definition-list{margin-bottom:16px!important;font-size:1rem;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;line-height:1.25;color:#00294d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-style:normal;display:-ms-flexbox;display:flex;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-ms-flex-flow:row;flex-flow:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:visible}.duet-definition-list.duet-p-0{padding:0!important}.duet-definition-list.duet-m-0{margin:0!important}.duet-definition-list.duet-theme-turva{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-definition-list dt{padding:16px!important;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:calc(35% - 32px);flex-basis:calc(35% - 32px);font-weight:600;overflow:hidden}\@media only screen and (max-width:35.9375em){.duet-definition-list dt{padding-bottom:4px!important;width:100%;-ms-flex:inherit;flex:inherit}}.duet-theme-turva .duet-definition-list dt{font-weight:700}.duet-definition-list dd{padding:16px!important;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:calc(65% - 32px);flex-basis:calc(65% - 32px);margin-left:auto;text-align:left;overflow:hidden}\@media only screen and (max-width:35.9375em){.duet-definition-list dd{padding-top:0!important;width:100%;-ms-flex:inherit;flex:inherit}}.duet-definition-list-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:visible}.striped .duet-definition-list-row:nth-child(odd) dd,.striped .duet-definition-list-row:nth-child(odd) dt{background:#f5f8fa}.duet-theme-turva.striped .duet-definition-list-row:nth-child(odd) dd,.duet-theme-turva.striped .duet-definition-list-row:nth-child(odd) dt{background:#f7f7f7}"; }
};

export { DuetDefinitionList as duet_definition_list };