@duetds/components/lib/esm/duet-icon.entry.js

This package includes Duet Core Components and related tools.

import { r as registerInstance, h, H as Host, c as getElement } from './core-12b6bfe8.js';
import { b as jsUtils_7, j as jsUtils_6 } from './js-utils-b3b951a3.js';
import { d as duetIcons } from './icons-cfd0386d.js';
import { t as tokens } from './tokens.common-ee94af0b.js';

const DuetIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Theme of the icon. This setting will be overrided when you set the color property. Can be one of: "default", "turva".
         */
        this.theme = "";
        /**
         * Icon name from Duet to display. For example "action-add" or "action-arrow-right".
         */
        this.name = "action-add";
        /**
         * Controls the margin of the component. Can be one of: "auto", "none".
         */
        this.margin = "auto";
        /**
         * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case.
         * Example: "color-primary".
         */
        this.color = "";
        /**
         * Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports.
         * Example: "color-primary".
         */
        this.background = "";
        /**
         * Icon size. Entered as one of the icon size design tokens. Can be one of: "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large".
         */
        this.size = "medium";
        /**
         * Custom color to be used for a circular border and icon outline, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports.
         * Example: "color-primary".
         */
        this.outline = "";
    }
    /**
     * Component lifecycle events.
     */
    componentWillLoad() {
        if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
            this.theme = "turva";
        }
    }
    /**
     * render() function.
     * Always the last one in the class.
     */
    render() {
        const styles = {
            color: tokens[jsUtils_7(this.color)] || tokens[jsUtils_7(this.outline)],
            background: tokens[jsUtils_7(this.background)],
            "border-color": tokens[jsUtils_7(this.outline)],
        };
        return (h(Host, { class: {
                "duet-m-0": this.margin === "none",
                "duet-icon-has-outline": this.outline !== "",
                "duet-icon-has-background": this.background !== "",
            } }, h("div", { "aria-hidden": "true", style: styles, class: {
                "duet-icon": true,
                [this.size]: true,
                "duet-theme-turva": this.theme === "turva",
                "duet-theme-default": this.theme === "default",
                "duet-icon-has-outline": this.outline !== "",
                "duet-icon-has-background": this.background !== "",
            } }, h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: duetIcons[jsUtils_6(this.name)].svg }))));
    }
    get element() { return getElement(this); }
    static get style() { return ":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;margin-bottom:16px!important;display:inline-block;-webkit-tap-highlight-color:transparent;max-width:100%;width:auto;color:inherit}\@media only screen and (max-width:35.9375em){:host(.duet-icon-has-background),:host(.duet-icon-has-outline){margin-bottom:0!important}}:host(.duet-m-0){margin:0!important}\@media only screen and (max-width:35.9375em){:host(.duet-m-0){margin:0!important}}.duet-icon{-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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform-origin:top center;transform-origin:top center}.duet-icon.duet-icon-has-outline{border-width:1px;border-style:solid;border-radius:50%;padding:12px}\@media only screen and (max-width:35.9375em){.duet-icon.duet-icon-has-outline{outline:1px solid transparent;-webkit-transform:scale(.8);transform:scale(.8)}}.duet-icon.duet-icon-has-background{color:#fff!important;border-radius:50%;padding:19.2px}\@media only screen and (max-width:35.9375em){.duet-icon.duet-icon-has-background{outline:1px solid transparent;-webkit-transform:scale(.8);transform:scale(.8)}}.duet-icon.duet-theme-default{color:#0077b3}.duet-icon.duet-theme-turva{color:#c60c30}.duet-icon.xxx-small .duet-icon-svg{width:7px;height:7px}.duet-icon.xx-small .duet-icon-svg{width:10px;height:10px}.duet-icon.x-small .duet-icon-svg{width:16px;height:16px}.duet-icon.small .duet-icon-svg{width:20px;height:20px}.duet-icon.large .duet-icon-svg{width:30px;height:30px}.duet-icon.x-large .duet-icon-svg{width:36px;height:36px}.duet-icon.xx-large .duet-icon-svg,.duet-icon.xxx-large .duet-icon-svg{width:48px;height:48px}\@media only screen and (min-width:48em){.duet-icon.xxx-large .duet-icon-svg{width:72px;height:72px}}.duet-icon .duet-icon-svg{display:block;width:24px;height:24px;min-width:100%}.duet-icon svg{fill:currentColor;width:100%;min-width:100%}"; }
};

export { DuetIcon as duet_icon };