@aqua-ds/web-components
Version:
AquaDS Web Components
102 lines (98 loc) • 9.66 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqRadioCss = ".aq-radio{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0px}.aq-radio__info{margin-left:var(--spacing-size-small);color:var(--color-paper-darker)}.aq-radio__info-icon{font-size:var(--font-size-xs) !important}.aq-radio--required::after{content:\"*\";vertical-align:top;font-size:var(--font-size-xs);gap:var(--spacing-size-small);color:var(--color-danger-base)}.aq-radio--is-disabled{color:var(--color-paper-base)}.aq-radio-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:relative}.aq-radio-container--is-disabled:hover{cursor:auto !important}.aq-radio-container input:disabled{pointer-events:none}.aq-radio-container input:disabled~.aq-radio-container__helperText span{color:var(--color-paper-dark)}.aq-radio-container__title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--spacing-size-short)}.aq-radio-container__title [class^=aq-icon-]{font-size:var(--font-size-m);margin-right:var(--spacing-size-small)}.aq-radio-container__label{font-family:var(--font-family-basic);font-style:normal;font-weight:normal;font-size:var(--font-size-s);line-height:var(--font-line-height-7);color:var(--color-ink-base);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aq-radio-container__label--is-disabled{color:var(--color-paper-base)}.aq-radio-container__label input:disabled{color:var(--color-paper-base)}.aq-radio-container__label__info{margin-left:var(--spacing-size-minor);color:var(--color-ink-base)}.aq-radio-container__caption{display:block;color:var(--color-paper-darker);font-size:var(--font-size-xs);line-height:var(--font-line-height-8);font-weight:var(--font-weight-regular)}.aq-radio-container input{opacity:0;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:-1}.aq-radio-container__radio{-webkit-box-sizing:content-box;box-sizing:content-box;margin-left:auto;margin-top:var(--spacing-size-basic);cursor:pointer;width:var(--spacing-size-moderate);height:var(--spacing-size-moderate);border:var(--spacing-size-basic) solid var(--color-paper-light);border-radius:100%;position:relative;-webkit-transition:border 0.5s linear, var(--shadow-basic) 0.2s;transition:border 0.5s linear, var(--shadow-basic) 0.2s;background:var(--color-white)}.aq-radio-container__radio::before,.aq-radio-container__radio::after{content:\"\";display:block;width:inherit;height:inherit;border-radius:inherit;position:absolute;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.aq-radio-container__radio::before{background:var(--color-paper-base);opacity:0}.aq-radio-container__radio::after{background:var(--color-primary-base);opacity:0.4;-webkit-transition:0.6s;transition:0.6s}input:checked+.aq-radio-container__radio{border-color:var(--color-primary-base)}input:checked+.aq-radio-container__radio::before{background:var(--color-primary-base);opacity:1;-webkit-transform:scale(0.6);transform:scale(0.6)}input:active+.aq-radio-container__radio,input:active:hover+.aq-radio-container__radio{cursor:pointer;-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}input:active+.aq-radio-container__radio::before,input:active:hover+.aq-radio-container__radio::before{background:var(--color-paper-base);opacity:1;-webkit-transform:scale(0.6);transform:scale(0.6)}input:active:checked+.aq-radio-container__radio{border-color:var(--color-primary-base)}input:active:checked+.aq-radio-container__radio::before{background:var(--color-primary-base);opacity:1;-webkit-transform:scale(0.6);transform:scale(0.6)}input:focus+.aq-radio-container__radio,input:focus:hover+.aq-radio-container__radio{cursor:pointer;-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}input:disabled+.aq-radio-container__radio{cursor:default;border-color:var(--color-paper-light);-webkit-box-shadow:none !important;box-shadow:none !important}input:disabled+.aq-radio-container__radio::before{opacity:0 !important}input:disabled:checked+.aq-radio-container__radio{border-color:var(--color-primary-light)}input:disabled:checked+.aq-radio-container__radio::before{opacity:1 !important;background:var(--color-primary-light)}input:disabled:checked:hover+.aq-radio-container__radio{cursor:pointer}input:disabled:checked:hover+.aq-radio-container__radio::before{background:var(--color-primary-light)}input:disabled:checked:focus+.aq-radio-container__radio{border-color:var(--color-primary-light)}input:hover+.aq-radio-container__radio{-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}input:hover+.aq-radio-container__radio::before{background:var(--color-paper-base);opacity:1;-webkit-transform:scale(0.6);transform:scale(0.6)}input:hover:checked+.aq-radio-container__radio::before{background:var(--color-primary-base)}.aq-radio-container__radio input:hover~.text{color:var(--color-primary-base)}";
const AqRadio = /*@__PURE__*/ proxyCustomElement(class AqRadio extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '';
this.label = '';
this.icon = '';
this.info = '';
this.isRequired = false;
this.tooltipWidth = '';
this.isChecked = false;
this.isDisabled = false;
this.idRadio = '';
this.valueRadio = '';
this.name = '';
}
get isIcon() {
return this.icon?.length > 0;
}
get isLabelVisible() {
return this.label?.length > 0 || typeof this.label === 'object';
}
getTooltip() {
return (this.info !== '' && (h("aq-tooltip", { config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", null, this.info))));
}
async handleChange(event) {
event.stopPropagation();
if (this.isDisabled || (this.value === this.valueRadio && this.isChecked))
return;
this.value = this.valueRadio;
emitEvent('change', this.hostElement, { value: this.value }, event);
}
cssClassAqRadio() {
return {
'aq-radio': true,
'aq-radio--is-disabled': this.isDisabled,
};
}
cssClassAqLabel() {
return {
'aq-radio-container__label': true,
'aq-radio-container__label--is-disabled': this.isDisabled,
};
}
cssClassAqLabelConteiner() {
return {
'aq-radio-container': true,
'aq-radio-container--is-disabled': this.isDisabled,
};
}
render() {
const tooltip = this.getTooltip();
const cssClassAqRadio = this.cssClassAqRadio();
const cssClassAqLabel = this.cssClassAqLabel();
const cssClassAqLabelConteiner = this.cssClassAqLabelConteiner();
return (h(Host, { key: '6f3a08bdf68556423e9fd1e778f392fdc5878365' }, h("div", { key: '054759c3b1f5aa5903637a59bc43d7ab34d881d4', class: cssClassAqRadio }, h("label", { key: '1702a3929ea3f22ca7ebddabf673c029f5fa1ef5', class: cssClassAqLabelConteiner }, h("input", { key: '88445a8815abc68b45b7689a202030663c5f579c', type: "radio", disabled: this.isDisabled, name: this.name, value: this.valueRadio, id: this.idRadio, onClick: event => this.handleChange(event), onChange: event => event.stopPropagation(), checked: this.isChecked }), h("span", { key: '25e0064a80e7fff3fca7d0f3e6fa0cb9907098df', class: "aq-radio-container__radio" }), (this.label || this.icon) &&
h("div", { key: 'f8ad14f43e8036ba1b3ee27b61c40ea6a39acb41', class: "aq-radio-container__title" }, this.isIcon && h("em", { key: 'f18d3e28dcc4c633fe1849b66505f1f0935b5cc7', class: this.icon }), this.isLabelVisible && h("span", { key: '7225e99f5c8bf540fe420dd60fd17eb87c0ec8fd', class: cssClassAqLabel }, this.label)), this.isRequired && h("span", { key: 'd34a74f2ebee7676b85f0683acea291e7966aa18', class: "aq-radio--required" })), h("span", { key: '6f0e3462ffc701f75b050abcba4a0f9285aeace4' }, tooltip, this.info && h("span", { key: 'c8e300c6885b86f55f164489d4612dbdac30539f', class: "aq-icon-alert-circle aq-radio__info-icon aq-radio__info", "aria-hidden": "true" })))));
}
get hostElement() { return this; }
static get style() { return aqRadioCss; }
}, [256, "aq-radio", {
"value": [1025],
"label": [1],
"icon": [1],
"info": [1],
"isRequired": [4, "is-required"],
"tooltipWidth": [1, "tooltip-width"],
"isChecked": [4, "is-checked"],
"isDisabled": [4, "is-disabled"],
"idRadio": [1, "id-radio"],
"valueRadio": [1, "value-radio"],
"name": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-radio", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-radio":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqRadio);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqRadio as A, defineCustomElement as d };