@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-popover.cjs.entry.js

@@ -0,0 +1,340 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+
+const popoverCss = () => `:host{display:inline-block;position:relative}.popover__container{position:relative;display:inline-block;font-family:var(--ifx-font-family)}.popover{position:absolute;z-index:1000;display:none;background:#ffffff;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);width:var(--ifx-popover-width, 240px);min-width:var(--ifx-popover-width, 240px);max-width:320px;pointer-events:auto;box-sizing:border-box}.popover.visible{display:flex;flex-direction:column}.popover--disabled{opacity:0.5;pointer-events:none}.popover-close{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:background-color 0.2s ease}.popover-close:hover{background-color:#f7f7f7}.popover-close:focus{outline:2px solid #0a8276;outline-offset:1px}.popover-content{display:flex;flex-direction:column;padding:12px;gap:4px;text-align:left;min-height:24px}.popover-title{font-size:1rem;font-weight:600;color:#1d1d1d;margin:0;padding-right:24px;text-align:left}.popover-text{font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#575352;margin:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;text-align:left}.popover-arrow-svg{position:absolute;width:12px;height:8px;color:#ffffff;pointer-events:none;z-index:1001}.popover-arrow-svg path{fill:currentColor}`;
+
+const Popover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+        this.ifxClose = index.createEvent(this, "ifxClose", 7);
+    }
+    get el() { return index.getElement(this); }
+    popoverVisible = false;
+    computedArrowPosition = {};
+    /** Title text displayed in the popover header */
+    popoverTitle = '';
+    /** Body text displayed in the popover content */
+    text = '';
+    /** Position of the popover relative to the trigger element */
+    position = 'auto';
+    /** Whether the popover is disabled */
+    disabled = false;
+    /** Whether the popover is initially open */
+    open = false;
+    /** Accessible label for the popover */
+    ariaLabelText = null;
+    /** Emitted when the popover is opened */
+    ifxOpen;
+    /** Fired when the component is closed. */
+    ifxClose;
+    static GAP = 12;
+    popoverEl;
+    triggerEl;
+    lastOpenTrigger = null;
+    openChanged(newValue) {
+        this.popoverVisible = newValue;
+        if (!this.popoverEl)
+            return;
+        if (newValue) {
+            this.popoverEl.style.visibility = 'hidden';
+            this.popoverEl.style.display = 'flex';
+            this.positionPopover();
+            this.popoverEl.style.visibility = 'visible';
+        }
+        else {
+            this.popoverEl.style.display = 'none';
+            this.popoverEl.style.visibility = '';
+        }
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent('ifx-popover', await framework);
+        }
+        this.popoverEl = this.el.shadowRoot.querySelector('.popover');
+        this.setupTriggerElement();
+        this.popoverVisible = this.open;
+        if (this.open) {
+            this.popoverEl.style.visibility = 'hidden';
+            this.popoverEl.style.display = 'flex';
+            this.positionPopover();
+            this.popoverEl.style.visibility = 'visible';
+            this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
+        }
+        // Outside click closing disabled by design
+    }
+    setupTriggerElement() {
+        this.cleanupTriggerListeners();
+        const slotElements = Array.from(this.el.children);
+        this.triggerEl = slotElements[0] || this.el;
+        this.triggerEl.addEventListener('click', this.onClick);
+    }
+    disconnectedCallback() {
+        this.cleanupTriggerListeners();
+    }
+    cleanupTriggerListeners() {
+        if (!this.triggerEl)
+            return;
+        this.triggerEl.removeEventListener('click', this.onClick);
+    }
+    getViewportSpace(triggerRect) {
+        return {
+            above: triggerRect.top,
+            below: window.innerHeight - triggerRect.bottom,
+            left: triggerRect.left,
+            right: window.innerWidth - triggerRect.right
+        };
+    }
+    resetPositioningStyles() {
+        if (!this.popoverEl)
+            return;
+        this.popoverEl.style.top = '';
+        this.popoverEl.style.bottom = '';
+        this.popoverEl.style.left = '';
+        this.popoverEl.style.right = '';
+        this.popoverEl.style.transform = '';
+        this.popoverEl.style.visibility = '';
+    }
+    positionPopover() {
+        if (!this.popoverEl || !this.triggerEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const space = this.getViewportSpace(triggerRect);
+        let position = this.position;
+        if (position === 'auto') {
+            position = this.getBestPosition(triggerRect, popoverRect, space);
+        }
+        else {
+            position = this.validateAndAdjustPosition(position, popoverRect, space);
+        }
+        this.resetPositioningStyles();
+        const { popoverStyle, arrowStyle } = this.calculatePosition(triggerRect, popoverRect, position);
+        Object.assign(this.popoverEl.style, popoverStyle);
+        this.computedArrowPosition = arrowStyle;
+        this.popoverEl.setAttribute('data-placement', position);
+    }
+    getBestPosition(triggerRect, popoverRect, space) {
+        const gap = Popover.GAP;
+        const fitsV = (s) => s >= popoverRect.height + gap;
+        const fitsH = (s) => s >= popoverRect.width + gap;
+        const overhang = (popoverRect.width - triggerRect.width) / 2;
+        const canCenter = triggerRect.left - overhang >= 0 && triggerRect.right + overhang <= window.innerWidth;
+        const canStart = triggerRect.left + popoverRect.width <= window.innerWidth;
+        const align = (side) => canCenter ? side : canStart ? `${side}-start` : `${side}-end`;
+        if (fitsV(space.above))
+            return align('top');
+        if (fitsV(space.below))
+            return align('bottom');
+        if (fitsH(space.right))
+            return 'right';
+        if (fitsH(space.left))
+            return 'left';
+        return space.below >= space.above ? align('bottom') : align('top');
+    }
+    validateAndAdjustPosition(desiredPosition, popoverRect, space) {
+        const gap = Popover.GAP;
+        switch (desiredPosition) {
+            case 'top':
+            case 'top-start':
+            case 'top-end':
+                if (space.above >= popoverRect.height + gap)
+                    return desiredPosition;
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                return 'bottom';
+            case 'bottom':
+            case 'bottom-start':
+            case 'bottom-end':
+                if (space.below >= popoverRect.height + gap)
+                    return desiredPosition;
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                return 'top';
+            case 'left':
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                return 'right';
+            case 'right':
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                return 'left';
+            default:
+                return 'bottom';
+        }
+    }
+    calculatePosition(triggerRect, popoverRect, position) {
+        const gap = Popover.GAP;
+        const popoverStyle = {
+            position: 'absolute',
+            zIndex: '1000'
+        };
+        let arrowStyle = {};
+        switch (position) {
+            case 'top-start':
+                popoverStyle.left = `0px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    left: '12px'
+                };
+                break;
+            case 'top-end':
+                popoverStyle.right = `0px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    right: '12px'
+                };
+                break;
+            case 'top':
+                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    left: '50%',
+                    transform: 'translateX(-50%)'
+                };
+                break;
+            case 'bottom-start':
+                popoverStyle.left = `0px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    left: '12px',
+                    transform: 'rotate(180deg)'
+                };
+                break;
+            case 'bottom-end':
+                popoverStyle.right = `0px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    right: '12px',
+                    transform: 'rotate(180deg)'
+                };
+                break;
+            case 'bottom':
+                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    left: '50%',
+                    transform: 'translateX(-50%) rotate(180deg)'
+                };
+                break;
+            case 'left':
+                popoverStyle.right = `${triggerRect.width + gap}px`;
+                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
+                arrowStyle = {
+                    top: '50%',
+                    right: '-10px',
+                    transform: 'translateY(-50%) rotate(-90deg)'
+                };
+                break;
+            case 'right':
+                popoverStyle.left = `${triggerRect.width + gap}px`;
+                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
+                arrowStyle = {
+                    top: '50%',
+                    left: '-10px',
+                    transform: 'translateY(-50%) rotate(90deg)'
+                };
+                break;
+        }
+        return { popoverStyle, arrowStyle };
+    }
+    positionChanged() {
+        if (this.popoverVisible) {
+            setTimeout(() => this.positionPopover(), 0);
+        }
+    }
+    /** Programmatically show the popover */
+    async show() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.popoverEl.style.visibility = 'hidden';
+        this.popoverEl.style.display = 'flex';
+        this.positionPopover();
+        this.popoverEl.style.visibility = 'visible';
+        this.popoverVisible = true;
+        this.lastOpenTrigger = this.triggerEl || null;
+        this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
+    }
+    /** Programmatically hide the popover */
+    async hide() {
+        this.open = false;
+        this.popoverVisible = false;
+        if (this.popoverEl) {
+            this.popoverEl.style.display = 'none';
+            this.popoverEl.style.visibility = '';
+        }
+        this.ifxClose.emit();
+    }
+    /** Programmatically toggle the popover visibility */
+    async toggle() {
+        if (this.popoverVisible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onClick = (event) => {
+        event.stopPropagation();
+        this.lastOpenTrigger = this.triggerEl || event.currentTarget || null;
+        this.toggle();
+    };
+    onCloseClick = (event) => {
+        event.stopPropagation();
+        this.hide();
+    };
+    render() {
+        const popoverClass = {
+            'popover': true,
+            'visible': this.popoverVisible,
+            'popover--disabled': this.disabled
+        };
+        const arrowStyles = {
+            position: 'absolute',
+            ...this.computedArrowPosition
+        };
+        return (index.h("div", { key: '15f774e912b5427966231688385aff04da526869', class: "popover__container", "aria-label": this.ariaLabelText }, index.h("slot", { key: 'e5fd47a126d1c6c1be11fb1394fac65fff574f1e' }), index.h("div", { key: '4daa2535f92158e4dd26fe4ff3a16e19f0ee903d', class: popoverClass, role: "dialog", "aria-modal": "false" }, index.h("button", { key: 'dbdb04f3e229a8f15d713e00f8c17c9d338be9ff', "aria-label": "Close Popover", class: "popover-close", onClick: this.onCloseClick }, index.h("ifx-icon", { key: 'bd29a9fc230343d57ff4d0ed1a92a841ce037a07', icon: "cross16" })), index.h("div", { key: 'dc87a2c432d63b78a91cf88a415a246f7212473a', class: "popover-content" }, this.popoverTitle && index.h("div", { key: '78ddd6bad89ee21bea5cfec3675057fd9847c5e7', class: "popover-title" }, this.popoverTitle), this.text && index.h("div", { key: '0c1a856d0603d268e19eaa60fe8e50d916046a21', class: "popover-text" }, this.text), index.h("slot", { key: '3e5d4d7e80a1bb382ce2f041d4310338974a3d86', name: "content" })), index.h("svg", { key: 'cf61e03de9b1ba8d1c89e0ae54403678178142bf', class: "popover-arrow-svg", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", style: arrowStyles }, index.h("path", { key: '1c25f8f94aacd59b4b6c5fe90e52fbb5bd6cf909', d: "M6 8L0 0L12 0L6 8Z", fill: "currentColor" })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }],
+        "position": [{
+                "positionChanged": 0
+            }]
+    }; }
+};
+Popover.style = popoverCss();
+
+exports.ifx_popover = Popover;

package/dist/cjs/ifx-progress-bar.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const progressBarCss = () => `:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#eeeded;font-family:var(--ifx-font-family)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#ffffff}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}`;
+
+const ProgressBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Current value of the progress bar (e.g. completion percentage). */
+    value = 0;
+    /** Size of the progress bar (e.g. small, medium, large). */
+    size;
+    /** Whether to show a text label next to the progress bar. */
+    showLabel = false;
+    internalValue;
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.internalValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-progress-bar", await framework);
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'b8a95a77fbd9b4681de1b92b434957b0c680e22a', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, index.h("div", { key: '01d282d3921f4270e1088f8b13d5f4e0e1b4e63a', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && (index.h("span", { key: '8fc8c0bf257e0b47a96f60a77367dfdfff82a61a', class: "label" }, `${this.internalValue}%`)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+ProgressBar.style = progressBarCss();
+
+exports.ifx_progress_bar = ProgressBar;

package/dist/cjs/ifx-radio-button-group.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const radioButtonGroupCss = () => `.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-family:var(--ifx-font-family);font-size:1rem;color:#1d1d1d;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#cd002f}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1d1d1d}.caption.error{color:#cd002f}.caption-text{font-family:var(--ifx-font-family);font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}`;
+
+const RadioButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    errorStates = new Map();
+    get el() { return index.getElement(this); }
+    /** Layout direction of the checkbox group (horizontal or vertical). */
+    alignment = "vertical";
+    /** Size of the checkbox group (e.g. small, medium). */
+    size;
+    /** Whether to show the group label above the checkboxes. */
+    showGroupLabel;
+    /** Text used as the group label. */
+    groupLabelText = "Group Label Text";
+    /** Whether to show a caption under the group. */
+    showCaption;
+    /** Text used for the caption below the group. */
+    captionText;
+    /** Whether to show an icon next to the caption text. */
+    showCaptionIcon;
+    /** Whether selecting at least one checkbox is required. */
+    required = false;
+    hasErrors = false;
+    handleRadioButtonError(event) {
+        const radioButton = event.target;
+        if (radioButton.tagName.toLowerCase() === "ifx-radio-button") {
+            this.errorStates.set(radioButton, event.detail);
+            this.updateHasErrors();
+        }
+    }
+    /** Method to set the error state of all radio-butttons in the group */
+    async setGroupError(error) {
+        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
+        radioButtons.forEach((radioButton) => {
+            radioButton.error = error;
+        });
+    }
+    componentWillLoad() {
+        this.initializeState();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-radio-button-group", await framework);
+        }
+    }
+    handleSlotChange = () => {
+        this.initializeState();
+    };
+    initializeState() {
+        this.errorStates.clear();
+        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
+        radioButtons.forEach((radioButton) => {
+            if (!this.errorStates.has(radioButton)) {
+                this.errorStates.set(radioButton, radioButton.error || false);
+            }
+        });
+        this.updateHasErrors();
+    }
+    updateHasErrors() {
+        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
+    }
+    render() {
+        return (index.h("div", { key: '04cc6baab4aab398b0a827f4c824d047368f92e8', class: "radio-button-group-container" }, this.showGroupLabel && (index.h("div", { key: '1f72da5b0269cdc66368da264a0c8549a8f61deb', class: "group-label" }, this.groupLabelText, this.required && (index.h("span", { key: '346b1392c9b0a36f4002b16ff2928d235f33dd13', class: `required ${this.hasErrors ? "error" : ""}` }, "*")))), index.h("div", { key: 'cb07b32ae38f0867ba17ff6fa211b3c98e4ac29c', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '3a7ae6a066ce46844c2381fcaf41938b7c9ee347', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? "error" : "default"}` }, this.showCaptionIcon ? (index.h("div", { class: "caption-icon" }, index.h("ifx-icon", { icon: "c-info-16" }))) : (""), index.h("div", { class: "caption-text" }, this.captionText))) : ("")));
+    }
+};
+RadioButtonGroup.style = radioButtonGroupCss();
+
+exports.ifx_radio_button_group = RadioButtonGroup;

package/dist/cjs/ifx-radio-button.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const radioButtonCss = () => `:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family);outline:none}.radioButton__container.readOnly{cursor:default;pointer-events:none}.radioButton__container.readOnly .radioButton__wrapper{border-color:#bfbbbb}.radioButton__container.readOnly .radioButton__wrapper.checked{border-color:#bfbbbb}.radioButton__container.readOnly .radioButton__wrapper.checked::after{background-color:#575352}.radioButton__container.disabled{cursor:default}.radioButton__container.disabled .radioButton__wrapper{background-color:#bfbbbb;border-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper:hover{background-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper.checked{background-color:#ffffff;border-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper.checked::after{background-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper.checked .radioButton__wrapper-mark{background-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper.checked:hover{border-color:#bfbbbb}.radioButton__container.disabled .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#bfbbbb}.radioButton__container.disabled .label{color:#bfbbbb}.radioButton__container:not(.disabled) .radioButton__wrapper.error{border-color:#cd002f}.radioButton__container:not(.disabled) .radioButton__wrapper.error:hover,.radioButton__container:not(.disabled) .radioButton__wrapper.error:focus-visible{border-color:#cd002f}.radioButton__container:not(.disabled) .radioButton__wrapper.error.checked::after{border-color:#cd002f;background-color:#cd002f}.radioButton__container:focus:not(.disabled) .radioButton__wrapper::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0a8276;border-radius:50%}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#ffffff;border:1px solid #575352}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0a8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:rgba(0, 0, 0, 0)}.radioButton__container .radioButton__wrapper:hover{background-color:#eeeded}.radioButton__container .radioButton__wrapper.checked{border-color:#0a8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0a8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665c}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665c}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1d1d1d;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}`;
+
+const RadioButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+        this.ifxError = index.createEvent(this, "ifxError", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    initialChecked = false;
+    /** If true, the checkbox is disabled and not interactive. */
+    disabled = false;
+    /** Value submitted when the checkbox is checked. */
+    value = "on";
+    /** If true, the checkbox is shown in an error state. */
+    error = false;
+    /** Size of the checkbox (small or medium). */
+    size = "s";
+    /** Name attribute used when submitting the checkbox in a form. */
+    name;
+    /** Whether the checkbox is currently checked (can be updated). */
+    checked;
+    hasSlot = false;
+    /** Returns the current checked state of the checkbox. */
+    async isChecked() {
+        return !!this.checked;
+    }
+    inputElement;
+    internals;
+    /** Fired when the checked state of the checkbox changes. */
+    ifxChange;
+    /** Fired when the checkbox enters or leaves an error state. */
+    ifxError;
+    componentWillLoad() {
+        // Initial state
+        this.checked = !!this.checked;
+        this.initialChecked = this.checked;
+        this.hasSlot =
+            !!this.el.querySelector("[slot]") || this.el.innerHTML.trim() !== "";
+        this.updateFormValue();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-radio-button", await framework);
+        }
+    }
+    handleCheckedChange(newValue) {
+        const normalizedValue = !!newValue;
+        if (newValue !== normalizedValue) {
+            this.checked = normalizedValue;
+            return;
+        }
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.updateFormValue();
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (state) {
+            this.checked = true;
+            this.updateFormValue();
+        }
+        else {
+            this.checked = false;
+            this.internals.setFormValue(null);
+        }
+    }
+    errorChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.ifxError.emit(newValue);
+        }
+    }
+    handleRadioButtonClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        const wasChecked = !!this.checked;
+        this.inputElement.click();
+        const nextChecked = !!this.inputElement.checked;
+        if (nextChecked === wasChecked) {
+            return;
+        }
+        this.checked = nextChecked;
+        this.ifxChange.emit(nextChecked);
+        const changeEvent = new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { checked: nextChecked },
+        });
+        this.el.dispatchEvent(changeEvent);
+    }
+    handleKeyDown(ev) {
+        if ([" ", "Enter"].includes(ev.key)) {
+            ev.preventDefault();
+            this.handleRadioButtonClick(new PointerEvent("click"));
+        }
+    }
+    handleExternalChange(event) {
+        const target = event.target;
+        if (target === this.el ||
+            target.tagName.toLowerCase() !== "ifx-radio-button")
+            return;
+        if (target.getAttribute("name") === this.name) {
+            this.checked = false;
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'b8572f4e16f7fdda8ab9a02adcd25a351673d018', class: `radioButton__container ${this.size} ${this.disabled ? "disabled" : ""}`, onClick: (e) => this.handleRadioButtonClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "radio", "aria-checked": this.checked ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", tabIndex: this.disabled ? -1 : 0 }, index.h("div", { key: '4c0aa67501a86e7f96e011fcea19391498bd8e4e', class: `radioButton__wrapper 
+            ${this.checked ? "checked" : ""}  
+            ${this.error ? "error" : ""}` }, this.checked && (index.h("div", { key: '465028120ead84ceeeff02580a1e6dec1735750b', class: "radioButton__wrapper-mark" }))), this.hasSlot && (index.h("div", { key: 'b06496317d3f71e372f2f1a80db7f9e954ee58be', class: `label ${this.size === "m" ? "label-m" : ""}` }, index.h("slot", { key: '8d8741b70b080ab8585c7bfed648086bd66104af' }))), index.h("input", { key: '52c44c47f9397a171491d73d0e3bb294b1e3373a', type: "radio", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }],
+        "error": [{
+                "errorChanged": 0
+            }]
+    }; }
+};
+RadioButton.style = radioButtonCss();
+
+exports.ifx_radio_button = RadioButton;