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

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { S as StepOptionState, d as defineCustomElement$3 } from './aq-setting-header2.js';
import { d as defineCustomElement$5 } from './aq-button2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$2 } from './aq-subheading2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';

const aqSettingContainerCss = ".aq-setting-container{-webkit-transition:margin 200ms ease-out;transition:margin 200ms ease-out;padding:var(--spacing-size-minor) var(--spacing-size-short);overflow-wrap:break-word}.aq-setting-edit-content{background:var(--color-white);border-left:var(--spacing-size-basic) solid var(--color-paper-light);border-right:var(--spacing-size-basic) solid var(--color-paper-light);padding:var(--spacing-size-medium) var(--spacing-size-big)}.aq-setting-footer{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;background:var(--color-white);border:var(--spacing-size-basic) solid var(--color-paper-light);padding:var(--spacing-size-medium);overflow-wrap:break-word;border-radius:0px 0px var(--spacing-size-minor) var(--spacing-size-minor)}.aq-setting-footer__right{display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-minor)}.aq-setting-footer__tertiary{right:var(--spacing-size-short)}";

const AqSettingContainer = /*@__PURE__*/ proxyCustomElement(class AqSettingContainer 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.option = {
            id: '',
            buttonSecondary: '',
            buttonPrimary: '',
            contentState: StepOptionState.INITIAL,
            buttonTertiary: '',
        };
    }
    get showSlots() {
        const contentState = this.option?.contentState || StepOptionState.INITIAL;
        console.log(this.option, ' contentState ', contentState);
        return contentState.toLowerCase();
    }
    getActions() {
        return (h("div", { class: "aq-setting-footer" }, h("div", null, this.option?.buttonTertiary && (h("aq-button", { "is-plain": true, class: "aq-setting-footer-tertiary", onClick: () => this.clickTertiary.emit(this.option.id) }, this.option.buttonTertiary))), h("div", { class: "aq-setting-footer__right" }, this.option?.buttonSecondary && (h("aq-button", { "is-outline": true, onClick: () => this.clickSecondary.emit(this.option.id) }, this.option.buttonSecondary)), this.option?.buttonPrimary && (h("aq-button", { "is-outline": true, variant: "primary", onClick: () => this.clickPrimary.emit(this.option.id) }, this.option.buttonPrimary)))));
    }
    get slotEdit() {
        return `edit-${this.option.id}`;
    }
    get slotSummary() {
        return `summary-${this.option.id}`;
    }
    getEditing() {
        return (this.showSlots === 'editing' && (h("div", { class: "aq-setting-edit-content" }, h("slot", { name: this.slotEdit }, " Slot edit"))));
    }
    getSummary() {
        return (this.showSlots === 'summary' && (h("div", { class: "aq-setting-edit-content" }, h("slot", { name: this.slotSummary }, "Slot summary"))));
    }
    handleClickEdit(e) {
        e.stopPropagation();
        this.clickEdit.emit(this.option.id);
    }
    render() {
        const editing = this.getEditing();
        const summary = this.getSummary();
        const actions = this.getActions();
        return (h(Host, { key: '36adf1c09caa578292450d39680536eaf6daf506' }, h("div", { key: '9489cfb281fc1bef8c5f47cc20e2b59d5dfb3920', class: "aq-setting-container" }, h("aq-setting-header", { key: '4b9d2b78426ea20b7a39019ee4ce205045e587aa', onClickEdit: e => this.handleClickEdit(e), option: this.option }), this.showSlots !== StepOptionState.INITIAL && (h("div", { key: 'b1119aa6036b53a9ddc87d3113386b28b8ed0cb4' }, this.showSlots === StepOptionState.EDITING && editing, this.showSlots === StepOptionState.SUMMARY && summary, actions)))));
    }
    static get style() { return aqSettingContainerCss; }
}, [260, "aq-setting-container", {
        "option": [16]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-setting-container", "aq-button", "aq-helper-text", "aq-setting-header", "aq-subheading", "aq-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-setting-container":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqSettingContainer);
            }
            break;
        case "aq-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "aq-helper-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "aq-setting-header":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "aq-subheading":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "aq-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { AqSettingContainer as A, defineCustomElement as d };