@aqua-ds/web-components
Version:
AquaDS Web Components
117 lines (113 loc) • 6.74 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { S as Sizes } from './sizes.js';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$5 } from './aq-card2.js';
import { d as defineCustomElement$4 } from './aq-card-content2.js';
import { d as defineCustomElement$3 } from './aq-helper-text2.js';
import { d as defineCustomElement$2 } from './aq-radio2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqRadioCardCss = ".aq-radio-card{font-family:var(--font-family-basic);font-weight:var(--font-weight-semi-bold);cursor:pointer;-webkit-transition:0.3s;transition:0.3s}.aq-radio-card__sublabel{padding-left:var(--spacing-size-large);font-weight:var(--font-weight-regular)}.aq-radio-card--checked .aq-radio-container__title,.aq-radio-card--checked .aq-radio-container__label{color:var(--color-primary-base)}.aq-radio-card--checked .aq-helper-text{color:var(--color-primary-base)}.aq-radio-card--checked .aq-card{border-color:var(--color-primary-base)}.aq-radio-card--checked .aq-card:hover,.aq-radio-card--checked .aq-card:has(input:focus),.aq-radio-card--checked .aq-card:active,.aq-radio-card--checked .aq-card:focus{background-color:var(--color-primary-lighter) !important}.aq-radio-card--checked.is-disabled{border-color:var(--color-primary-light)}.aq-radio-card--checked.is-disabled .aq-radio.is-disabled{color:var(--color-primary-light)}.aq-radio-card--checked.is-disabled .aq-card{border-color:var(--color-primary-light) !important}.aq-radio-card--checked.is-disabled .aq-helper-text{color:var(--color-primary-light) !important}.aq-radio-card:hover:not(.aq-radio-card--checked) .aq-radio-container__radio::before{background:var(--color-paper-base);opacity:1;-webkit-transform:scale(0.6);transform:scale(0.6)}.aq-radio-card input:active+.aq-radio-container__radio,.aq-radio-card input:focus+.aq-radio-container__radio{-webkit-box-shadow:none !important;box-shadow:none !important}.aq-radio-card.is-disabled,.aq-radio-card.is-disabled *{cursor:default;pointer-events:none}.aq-radio-card.is-disabled .aq-helper-text,.aq-radio-card.is-disabled * .aq-helper-text{color:var(--color-paper-light)}.aq-radio-card .aq-card-content{padding:var(--spacing-size-medium)}.aq-radio-card .aq-card{padding:0}.aq-radio-card .aq-card:hover,.aq-radio-card .aq-card:active,.aq-radio-card .aq-card:focus{background-color:var(--color-paper-lighter)}.aq-radio-card .aq-card:has(input:focus){-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}.aq-radio-card .aq-radio-container__title,.aq-radio-card .aq-radio-container__label{font-weight:var(--font-weight-semi-bold);cursor:pointer}";
const AqRadioCard = /*@__PURE__*/ proxyCustomElement(class AqRadioCard extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '';
this.label = '';
this.icon = '';
this.isChecked = false;
this.isDisabled = false;
this.idRadio = '';
this.valueRadio = '';
this.name = '';
this.subLabel = '';
this.SizesHelper = Sizes(this);
}
get isSubLabel() {
return typeof this.subLabel === 'function' || this.subLabel?.length > 0;
}
get isIcon() {
return this.icon?.length > 0;
}
getStyleAqRadioCard() {
return {
'aq-radio-card': true,
'aq-radio-card--helperText': this.isSubLabel,
'aq-radio-card--checked': this.isChecked,
'aq-radio-card--disabled': this.isDisabled,
};
}
handleClick() {
if (this.isDisabled)
return;
this.value = this.valueRadio;
emitEvent('change', this.el, this.value);
}
getStyleContent() {
return {
'aq-radio-card': true,
'aq-radio-card--checked': this.isChecked,
'is-disabled': this.isDisabled,
};
}
render() {
const cssClassAqRadioCard = this.getStyleAqRadioCard();
const style = this.SizesHelper.mixinSizeStyle;
const cssClassContent = this.getStyleContent();
return (h("div", { key: 'e0bbc4c18236dd8beaf1545d6c3a29a311a3fd8b', class: cssClassContent }, h("aq-card", { key: 'b4d659046bf8e534438df4fb7ce7833040856adb' }, h("aq-card-content", { key: 'f553e74abca7da9d7f76bd2b496f339387997fa2', onClick: () => { this.handleClick(); }, woPadding: true, class: cssClassAqRadioCard, style: style }, h("aq-radio", { key: 'c6eff81c87c2d3ba2cf18967c42329d110337704', value: this.valueRadio, "id-radio": this.valueRadio, isDisabled: this.isDisabled, isChecked: this.isChecked, name: this.name, label: this.label, icon: this.icon, valueRadio: this.valueRadio, onChange: (e) => {
e.stopPropagation();
} }), h("aq-helper-text", { key: '1c1cba78387fe54a2909a54aa553f42349f470ef', class: "aq-radio-card__sublabel" }, h("span", { key: '6b300229a6b3cc9584c818f1dc2c14f6a86e0e72', slot: "text" }, this.subLabel))))));
}
get el() { return this; }
static get style() { return aqRadioCardCss; }
}, [256, "aq-radio-card", {
"value": [1537],
"label": [1],
"icon": [1],
"isChecked": [1028, "is-checked"],
"isDisabled": [4, "is-disabled"],
"idRadio": [1, "id-radio"],
"valueRadio": [1, "value-radio"],
"name": [1],
"subLabel": [1, "sub-label"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-radio-card", "aq-card", "aq-card-content", "aq-helper-text", "aq-radio", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-radio-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqRadioCard);
}
break;
case "aq-card":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-card-content":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-radio":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqRadioCard as A, defineCustomElement as d };