@aqua-ds/web-components
Version:
AquaDS Web Components
126 lines (121 loc) • 6.76 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './aq-button2.js';
import { d as defineCustomElement$3 } from './aq-helper-text2.js';
import { d as defineCustomElement$2 } from './aq-subheading2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
var StepOptionState;
(function (StepOptionState) {
StepOptionState["EDITING"] = "editing";
StepOptionState["SUMMARY"] = "summary";
StepOptionState["INITIAL"] = "initial";
})(StepOptionState || (StepOptionState = {}));
const aqSettingHeaderCss = ".aq-setting-header{display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;background:var(--color-white);border-radius:var(--spacing-size-minor) var(--spacing-size-minor) 0px 0px;border:var(--spacing-size-basic) solid var(--color-paper-light);height:3.5rem}.aq-setting-header__left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:center;justify-content:center}.aq-setting-header__left [class^=aq-icon-]{font-size:var(--font-size-m);margin-top:calc(-1 * var(--spacing-size-small));margin-right:var(--spacing-size-minor);margin-left:var(--spacing-size-minor)}.aq-setting-header__icon{font-size:var(--font-size-xl);margin:var(--spacing-size-short);-ms-flex-item-align:start;align-self:start;padding-top:var(--spacing-size-basic)}.aq-setting-header__right,.aq-setting-header__subtitle,.aq-setting-header__title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-setting-header__right{margin-right:var(--spacing-size-short)}.aq-setting-header__state--default{color:var(--color-paper-dark)}.aq-setting-header__state--success{color:var(--color-success-base)}.aq-setting-header__state--error{color:var(--color-danger-base)}.aq-setting-header__state--warning{color:var(--color-warning-base)}.aq-setting-header--initial{border-radius:var(--spacing-size-minor)}.aq-setting-header__info{font-size:var(--font-size-s)}";
const AqSettingContent = /*@__PURE__*/ proxyCustomElement(class AqSettingContent extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.clickEdit = createEvent(this, "clickEdit", 7);
}
get initial() {
const contentState = this.option?.contentState || StepOptionState.INITIAL;
return contentState.toLowerCase() === StepOptionState.INITIAL;
}
getStyleClassSettingHeader() {
return {
'aq-setting-header--initial': this.initial,
'aq-setting-header': true,
};
}
getState() {
const optionState = this.option.state.toLowerCase() || 'default';
return optionState;
}
getIcon() {
let icon = '';
switch (this.getState()) {
case 'default':
icon = 'aq-icon-check-circle';
break;
case 'success':
icon = 'aq-icon-check-circle-fill';
break;
case 'error':
icon = 'aq-icon-alert-circle-fill';
break;
case 'warning':
icon = 'aq-icon-info-major-triangle-up-fill';
break;
default:
icon = 'aq-icon-check-circle';
}
const classIcon = {
[icon]: true,
[`aq-setting-header__state--${this.getState()}`]: true,
};
return h("em", { class: classIcon });
}
getTitle() {
return (h("div", { class: "aq-setting-header__title" }, h("aq-subheading", { tooltipWidth: this.option.tooltipWidth, info: this.option.info }, h("span", { slot: "text" }, this.option.title))));
}
get hasSubTitle() {
return this.option?.subtitle && this.option?.subtitle !== '';
}
getSubtitle() {
return (h("div", { class: "aq-setting-header__subtitle" }, this.hasSubTitle && h("aq-helper-text", null, h("span", { slot: "text" }, this.option.subtitle)), !this.hasSubTitle && (h("aq-helper-text", null, h("span", { slot: "text" }, "\u00A0")))));
}
get showSlots() {
const contentState = this.option?.contentState || StepOptionState.INITIAL;
const hasContentState = !(contentState.toLowerCase() === 'editing' || contentState.toLowerCase() === 'done');
return hasContentState;
}
get showEditButton() {
return this.option?.buttonEdit;
}
render() {
const cssClassSettingHeader = this.getStyleClassSettingHeader();
const icon = this.getIcon();
const title = this.getTitle();
const subtitle = this.getSubtitle();
return (h(Host, { key: '29cfb6ef82a9b3e4bdd0afa26387e35909b38657' }, h("div", { key: 'a94d479a4a589618a87a2ded668818a05c7f0b8b', class: cssClassSettingHeader }, h("div", { key: 'eddfa71a53bf46141838127618f53d4b3dd08cf1', class: "aq-setting-header__icon" }, icon), h("div", { key: '6500530072459d14c46f62bcd9aa58a30e3525c9', class: "aq-setting-header__left" }, title, subtitle), h("div", { key: '4bbe66d0ff2cd75b7802a4ddbeeae28eee6c547d', class: "aq-setting-header__right" }, this.showSlots && this.showEditButton &&
h("aq-button", { key: '91c9c12823446b9945566cccb106ab8857c65966', "is-outline": true, onClick: () => this.clickEdit.emit(this.option.id) }, this.option.buttonEdit)))));
}
static get style() { return aqSettingHeaderCss; }
}, [256, "aq-setting-header", {
"option": [16]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-setting-header", "aq-button", "aq-helper-text", "aq-subheading", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-setting-header":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqSettingContent);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-helper-text":
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 { AqSettingContent as A, StepOptionState as S, defineCustomElement as d };