@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
37 lines (33 loc) • 3.11 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
require('../../provider.cjs');
var splitChildren = require('../../splitChildren.cjs');
var minifyCss = require('../../minifyCss.cjs');
var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
var loadingMessage = require('./loading-message.cjs');
var label = require('./label.cjs');
var stateMessage = require('./state-message.cjs');
var spinner_wrapper = require('../components/spinner.wrapper.cjs');
/**
* @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
* @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)." }
*/
class DSRRadioGroupOption extends react.Component {
host;
initialLoading = false;
inputElement;
render() {
splitChildren.splitChildren(this.props.children);
const { theme = 'light', selected: isSelected, name, state } = this.props;
const isDisabled = this.props.disabled || this.props.disabledParent;
const isOptionLoading = this.props.loading && !isSelected;
const isLoading = isOptionLoading || this.props.loadingParent;
const id = 'radio-group-option';
const style = minifyCss.minifyCss(stylesEntry.getRadioGroupOptionCss(isDisabled, isLoading, state, theme));
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
e.stopPropagation();
}, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
}
}
exports.DSRRadioGroupOption = DSRRadioGroupOption;