@aqua-ds/web-components
Version:
AquaDS Web Components
126 lines (122 loc) • 7.58 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$2 } from './aq-radio2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqRadioButtonCss = ".aq-radio-button__container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;border-radius:var(--spacing-size-minor);padding:var(--spacing-size-small) 0px;width:100%}.aq-radio-button__container--vertical{-ms-flex-direction:column;flex-direction:column;padding:0px var(--spacing-size-small)}.aq-radio-button{border:var(--spacing-size-basic) solid transparent;border-radius:var(--spacing-size-minor);background-color:transparent;width:100%;cursor:pointer;padding:calc(var(--spacing-size-minor) + var(--spacing-size-small)) var(--spacing-size-medium);gap:var(--spacing-size-minor);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-transition:0.3s;transition:0.3s}.aq-radio-button .aq-radio-container__title,.aq-radio-button .aq-radio-container__label{font-family:var(--font-family-basic);font-size:var(--font-size-s);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-7);color:var(--color-ink-base);text-align:start;white-space:nowrap;cursor:pointer}.aq-radio-button__icon{font-size:var(--font-size-l)}.aq-radio-button:active:not(.is-disabled){-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-radio-button:hover{background:var(--color-paper-lighter);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);border-color:var(--color-paper-base)}.aq-radio-button:focus-visible{outline:none}.aq-radio-button:focus,.aq-radio-button:has(input:focus),.aq-radio-button:active{background:var(--color-paper-lighter);-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);z-index:1}.aq-radio-button.is-disabled{pointer-events:none;background:var(--color-white);cursor:default}.aq-radio-button.is-disabled .aq-radio-container__title,.aq-radio-button.is-disabled .aq-radio-container__label{color:var(--color-paper-base);cursor:default;pointer-events:none}.aq-radio-button--checked{border-color:var(--color-primary-base)}.aq-radio-button--checked .aq-radio-container__title,.aq-radio-button--checked .aq-radio-container__label{color:var(--color-primary-base)}.aq-radio-button--checked:focus,.aq-radio-button--checked:has(input:focus),.aq-radio-button--checked:hover,.aq-radio-button--checked:active:not(.is-disabled){background:var(--color-primary-lighter)}.aq-radio-button--checked:hover{border-color:var(--color-primary-base)}.aq-radio-button--checked.is-disabled{border-color:var(--color-primary-light);background:var(--color-white)}.aq-radio-button--checked.is-disabled .aq-radio-container__title,.aq-radio-button--checked.is-disabled .aq-radio-container__label{color:var(--color-primary-light)}.aq-radio-button__divider{padding:var(--spacing-size-small) var(--spacing-size-minor)}.aq-radio-button__divider .aq-divider--vertical{height:20px}.aq-radio-button__divider .aq-divider--horizontal{width:100%}.aq-radio-button .aq-radio-container__radio{display:none}.aq-radio-button .aq-radio-container__title{margin:0}";
const AqRadioButton = /*@__PURE__*/ proxyCustomElement(class AqRadioButton extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '';
this.idRadio = '';
this.valueRadio = '';
this.name = '';
this.label = '';
this.info = '';
this.icon = '';
this.tooltipWidth = '';
this.isChecked = false;
this.isDisabled = false;
this.orientation = 'horizontal';
// Internal props
this.position = 'vertical';
this.last = false;
this.checkedRadio = '';
}
getStyleAqRadioButton() {
return {
'aq-radio-button__container': true,
[`aq-radio-button__container--${this.orientation}`]: true
};
}
setValueRadio() {
if (!this.isDisabled)
emitEvent('change', this.hostElement, this.value);
}
get infoIsVisible() {
return typeof this.info === 'function' || this.info?.length > 0;
}
get colorButton() {
let color = 'default';
if (this.value && this.isChecked) {
color = 'primary';
}
return color;
}
handleClick(e) {
if (this.isDisabled)
return;
this.value = this.valueRadio;
emitEvent('change', this.hostElement, this.value, e);
}
getStyleAqRadioContainer() {
return {
'aq-radio-button': true,
'aq-radio-button-container': true,
'aq-radio-button--checked': this.isChecked,
'is-disabled': this.isDisabled,
};
}
get getOrientation() {
return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
}
get isLabelVisible() {
return typeof this.label === 'function' || this.label?.length > 0;
}
getTooltip() {
return (this.info && (h("aq-tooltip", { config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", null, this.info))));
}
render() {
const cssClassAqRadioButton = this.getStyleAqRadioButton();
const cssClassAqButtonRadioContainer = this.getStyleAqRadioContainer();
const tooltip = this.getTooltip();
return (h("div", { key: '9e8772816be7e262bbd07bf784e2016dc4b2f448', class: cssClassAqRadioButton }, h("label", { key: 'a01f85f4f0dd1ce4cae8a9c2aa4688fd65eb11d6' }, h("aq-radio", { key: 'b5224b46123a07d16e43f46a9ba5ef9331fcb7fd', style: { "width": "100%", "height": "100%" }, class: cssClassAqButtonRadioContainer, value: this.valueRadio, "id-radio": this.valueRadio, isDisabled: this.isDisabled, isChecked: this.isChecked, name: this.name, valueRadio: this.valueRadio, label: this.label, icon: this.icon, onClick: (e) => {
this.handleClick(e);
}, onChange: (e) => {
e.stopPropagation();
} }), this.info && tooltip)));
}
get hostElement() { return this; }
static get style() { return aqRadioButtonCss; }
}, [256, "aq-radio-button", {
"value": [1025],
"idRadio": [1, "id-radio"],
"valueRadio": [1, "value-radio"],
"name": [1],
"label": [1],
"info": [1],
"icon": [1],
"tooltipWidth": [1, "tooltip-width"],
"isChecked": [4, "is-checked"],
"isDisabled": [4, "is-disabled"],
"orientation": [1],
"position": [1],
"last": [4],
"checkedRadio": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-radio-button", "aq-radio", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-radio-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqRadioButton);
}
break;
case "aq-radio":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqRadioButton as A, defineCustomElement as d };