@aqua-ds/web-components/components-build/aq-setting-step.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { S as StepOptionState, d as defineCustomElement$7 } from './aq-setting-header2.js';
import { d as defineCustomElement$a } from './aq-button2.js';
import { d as defineCustomElement$9 } from './aq-helper-text2.js';
import { d as defineCustomElement$8 } from './aq-setting-container2.js';
import { d as defineCustomElement$6 } from './aq-step-content2.js';
import { d as defineCustomElement$5 } from './aq-step-group2.js';
import { d as defineCustomElement$4 } from './aq-step-title2.js';
import { d as defineCustomElement$3 } from './aq-subheading2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';

const aqSettingStepCss = ".aq-setting-step{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;margin-bottom:var(--spacing-size-moderate);height:100%;max-width:98%}.aq-setting-group .aq-step-group{display:block}";

const AqStep = /*@__PURE__*/ proxyCustomElement(class AqStep extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.clickPrimary = createEvent(this, "clickPrimary", 7);
        this.clickSecondary = createEvent(this, "clickSecondary", 7);
        this.clickTertiary = createEvent(this, "clickTertiary", 7);
        this.clickEdit = createEvent(this, "clickEdit", 7);
        this.options = [];
    }
    slotEdit(option) {
        const contentState = option?.contentState ?? 'initial';
        if (contentState.toLowerCase() === StepOptionState.EDITING) {
            return `edit-${option.id}`;
        }
    }
    slotSummary(option) {
        const contentState = option?.contentState ?? 'initial';
        if (contentState === StepOptionState.SUMMARY) {
            return `summary-${option.id}`;
        }
    }
    handleClick(event, eventType) {
        event.stopPropagation();
        const events = {
            primary: this.clickPrimary,
            secondary: this.clickSecondary,
            tertiary: this.clickTertiary,
            edit: this.clickEdit,
        };
        events[eventType].emit(event.detail);
    }
    render() {
        return (h(Host, { key: '9623b59b0d23429f65da1f0a47188cc5276f3676' }, h("div", { key: '325c800ba2be296198ee779317014812b44b3c5e', class: "aq-setting-step" }, h("aq-step-group", { key: '3959311b56cb953f3b83c1b0264323e6f4841678', isVertical: true }, this.options &&
            this.options?.map((option, index) => (h(Fragment, null, h("aq-step-title", { slot: `title-${index + 1}`, key: index, status: option.stepStatus }), h("aq-step-content", { slot: `content-${index + 1}` }, h("aq-setting-container", { option: option, onClickPrimary: e => this.handleClick(e, 'primary'), onClickSecondary: e => this.handleClick(e, 'secondary'), onClickTertiary: e => this.handleClick(e, 'tertiary'), onClickEdit: e => this.handleClick(e, 'edit') }, h("slot", { name: this.slotEdit(option) }), h("slot", { name: this.slotSummary(option) }))))))))));
    }
    static get style() { return aqSettingStepCss; }
}, [260, "aq-setting-step", {
        "options": [1040]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-setting-step", "aq-button", "aq-helper-text", "aq-setting-container", "aq-setting-header", "aq-step-content", "aq-step-group", "aq-step-title", "aq-subheading", "aq-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-setting-step":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqStep);
            }
            break;
        case "aq-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "aq-helper-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "aq-setting-container":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "aq-setting-header":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "aq-step-content":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "aq-step-group":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "aq-step-title":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "aq-subheading":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "aq-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const AqSettingStep = AqStep;
const defineCustomElement = defineCustomElement$1;

export { AqSettingStep, defineCustomElement };