@kelvininc/ui-components/dist/esm/kv-action-button-icon.entry.js

Kelvin UI Components

import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { c as EComponentSize } from './wizard.types-COrzvkrr.js';

const actionButtonIconCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--button-icon-large-size:var(--icon-button-primary-icon-size-regular);--button-icon-small-size:var(--icon-button-primary-icon-size-compact);--button-size-large:var(--icon-button-height-regular);--button-size-small:var(--icon-button-height-compact);position:relative}.action-button-icon--size-large kv-action-button::part(button){width:var(--button-size-large)}.action-button-icon--size-small kv-action-button::part(button){width:var(--button-size-small)}kv-action-button{--button-height-large:var(--button-size-large);--button-height-small:var(--button-size-small);--button-padding-x-large:var(--icon-button-padding-x-regular);--button-padding-y-large:var(--icon-button-padding-y-regular);--button-padding-x-small:var(--icon-button-padding-x-compact);--button-padding-y-small:var(--icon-button-padding-y-compact);--button-border-thickness:var(--icon-button-secondary-border-thickness-default);--button-border-radius-large:var(--icon-button-radius-regular);--button-border-radius-small:var(--icon-button-radius-compact);--button-icon-size-primary-large:var(--button-icon-large-size, --icon-button-primary-icon-size-regular);--button-icon-size-primary-small:var(--button-icon-small-size, --icon-button-primary-icon-size-compact);--button-icon-size-secondary-large:var(--button-icon-large-size, --icon-button-secondary-icon-size-regular);--button-icon-size-secondary-small:var(--button-icon-small-size, --icon-button-secondary-icon-size-compact);--button-icon-size-tertiary-large:var(--button-icon-large-size, --icon-button-tertiary-icon-size-regular);--button-icon-size-tertiary-small:var(--button-icon-small-size, --icon-button-tertiary-icon-size-compact);--button-icon-size-text-large:var(--button-icon-large-size, --icon-button-text-icon-size-regular);--button-icon-size-text-small:var(--button-icon-small-size, --icon-button-text-icon-size-compact);--button-icon-size-danger-large:var(--button-icon-large-size, --icon-button-danger-icon-size-regular);--button-icon-size-danger-small:var(--button-icon-small-size, --icon-button-danger-icon-size-compact);--icon-color-default-primary:var(--icon-button-primary-icon-color-default);--icon-color-default-secondary:var(--icon-button-secondary-icon-color-default);--icon-color-default-tertiary:var(--icon-button-tertiary-icon-color-default);--icon-color-default-danger:var(--icon-button-danger-icon-color-default);--icon-color-hover-primary:var(--icon-button-primary-icon-color-default);--icon-color-hover-secondary:var(--icon-button-secondary-icon-color-subtle);--icon-color-hover-tertiary:var(--icon-button-tertiary-icon-color-subtle);--icon-color-hover-danger:var(--icon-button-danger-icon-color-default);--icon-color-focus-primary:var(--icon-button-primary-icon-color-default);--icon-color-focus-secondary:var(--icon-button-secondary-icon-color-default);--icon-color-focus-tertiary:var(--icon-button-tertiary-icon-color-default);--icon-color-focus-danger:var(--icon-button-danger-icon-color-default);--icon-color-disabled-primary:var(--icon-button-primary-icon-color-disabled);--icon-color-disabled-secondary:var(--icon-button-secondary-icon-color-disabled);--icon-color-disabled-tertiary:var(--icon-button-tertiary-icon-color-disabled);--icon-color-disabled-danger:var(--icon-button-danger-icon-color-disabled);--icon-color-active-primary:var(--icon-button-primary-icon-color-default);--icon-color-active-secondary:var(--icon-button-secondary-icon-color-subtle);--icon-color-active-tertiary:var(--icon-button-tertiary-icon-color-subtle);--icon-color-active-danger:var(--icon-button-danger-icon-color-default);--background-color-default-primary:var(--icon-button-primary-background-default);--background-color-default-secondary:var(--transparent);--background-color-default-tertiary:var(--transparent);--background-color-default-text:var(--transparent);--background-color-default-danger:var(--icon-button-danger-background-default);--background-color-hover-primary:var(--icon-button-primary-background-hover);--background-color-hover-secondary:var(--icon-button-secondary-background-hover);--background-color-hover-tertiary:var(--icon-button-tertiary-background-hover);--background-color-hover-text:var(--transparent);--background-color-hover-danger:var(--icon-button-danger-background-hover);--background-color-focus-primary:var(--icon-button-primary-background-default);--background-color-focus-secondary:var(--transparent);--background-color-focus-tertiary:var(--transparent);--background-color-focus-text:var(--transparent);--background-color-focus-danger:var(--icon-button-danger-background-default);--background-color-disabled-primary:var(--icon-button-primary-background-disabled);--background-color-disabled-secondary:var(--icon-button-secondary-background-disabled);--background-color-disabled-tertiary:var(--icon-button-tertiary-background-disabled);--background-color-disabled-text:var(--transparent);--background-color-disabled-danger:var(--icon-button-danger-background-disabled);--background-color-active-primary:var(--icon-button-primary-background-pressed);--background-color-active-secondary:var(--icon-button-secondary-background-pressed);--background-color-active-tertiary:var(--icon-button-tertiary-background-pressed);--background-color-active-text:var(--transparent);--background-color-active-danger:var(--icon-button-danger-background-pressed);--border-color-default-primary:var(--icon-button-primary-background-default);--border-color-default-secondary:var(--icon-button-secondary-border-color-default);--border-color-default-tertiary:var(--transparent);--border-color-default-text:var(--transparent);--border-color-default-danger:var(--icon-button-danger-background-default);--border-color-hover-primary:var(--icon-button-primary-background-hover);--border-color-hover-secondary:var(--icon-button-secondary-border-color-hover);--border-color-hover-tertiary:var(--icon-button-tertiary-background-hover);--border-color-hover-text:var(--transparent);--border-color-hover-danger:var(--icon-button-danger-background-hover);--border-color-focus-primary:var(--icon-button-primary-background-default);--border-color-focus-secondary:var(--icon-button-secondary-border-color-hover);--border-color-focus-tertiary:var(--transparent);--border-color-focus-text:var(--transparent);--border-color-focus-danger:var(--icon-button-danger-background-default);--border-color-disabled-primary:var(--icon-button-primary-background-disabled);--border-color-disabled-secondary:var(--icon-button-secondary-background-disabled);--border-color-disabled-tertiary:var(--icon-button-tertiary-background-disabled);--border-color-disabled-text:var(--transparent);--border-color-disabled-danger:var(--icon-button-danger-background-disabled);--border-color-active-primary:var(--icon-button-primary-background-pressed);--border-color-active-secondary:var(--icon-button-secondary-border-color-pressed);--border-color-active-tertiary:var(--icon-button-tertiary-background-pressed);--border-color-active-text:var(--transparent);--border-color-active-danger:var(--icon-button-danger-background-pressed);display:flex}kv-action-button::part(button){justify-content:center}";

const KvActionButtonIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.clickButton = createEvent(this, "clickButton", 7);
        this.focusButton = createEvent(this, "focusButton", 7);
        this.blurButton = createEvent(this, "blurButton", 7);
        /** @inheritdoc */
        this.disabled = false;
        /** @inheritdoc */
        this.active = false;
        /** @inheritdoc */
        this.loading = false;
        /** @inheritdoc */
        this.size = EComponentSize.Small;
    }
    render() {
        return (h(Host, { key: 'ec12079db81afec5a3610eb302076288d86a5af0' }, h("div", { key: '1b6bcfb2593c8d3c24035d6dc31ea6e3e1d417b8', class: {
                'action-button-icon': true,
                [`action-button-icon--size-${this.size}`]: true
            } }, h("kv-action-button", { key: '000c387702ec35707b38e0f0fd539873ff18f5b6', type: this.type, active: this.active, loading: this.loading, size: this.size, disabled: this.disabled, exportparts: "button" }, h("kv-icon", { key: 'fcde377fdf8cd46dd8540b6e72dfc923c68dbd78', name: this.icon, exportparts: "icon" })))));
    }
};
KvActionButtonIcon.style = actionButtonIconCss;

export { KvActionButtonIcon as kv_action_button_icon };