ngx-opalbytes-components 1.25.1 → 1.26.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Injectable, output, DestroyRef } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Optional, Inject, Injectable, output, DestroyRef } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -2322,6 +2322,626 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ["checkbox"]
             }] } });
 
+class CaoSlideToggleComponent {
+    checked = false;
+    isDisabled = false;
+    label = "";
+    labelPosition = "after";
+    name = "";
+    id = "";
+    ariaLabel = "";
+    dataCy = "";
+    required = false;
+    trackColor;
+    trackCheckedColor;
+    thumbColor;
+    thumbCheckedColor;
+    disabledTrackColor;
+    disabledThumbColor;
+    labelColor;
+    disabledLabelColor;
+    focusRingColor;
+    trackWidth;
+    trackHeight;
+    thumbSize;
+    animationDuration;
+    thumbIcon = "";
+    thumbCheckedIcon = "";
+    isLucideThumbIcon = false;
+    thumbIconColor = "";
+    thumbCheckedIconColor = "";
+    thumbIconSize = 12;
+    thumbIconStrokeWidth = 2;
+    set disabled(value) {
+        this.isDisabled = value;
+        this.cdr.markForCheck();
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    checkedChange = new EventEmitter();
+    toggleChange = new EventEmitter();
+    cdr = inject(ChangeDetectorRef);
+    onChange = () => { };
+    onTouched = () => { };
+    get resolvedThumbIcon() {
+        return this.checked && this.thumbCheckedIcon
+            ? this.thumbCheckedIcon
+            : this.thumbIcon;
+    }
+    get resolvedThumbIconColor() {
+        return this.checked
+            ? this.thumbCheckedIconColor || this.thumbIconColor
+            : this.thumbIconColor;
+    }
+    get hostStyles() {
+        const styles = {};
+        if (this.trackColor) {
+            styles["--cao-slide-toggle-track"] = this.trackColor;
+        }
+        if (this.trackCheckedColor) {
+            styles["--cao-slide-toggle-track-checked"] = this.trackCheckedColor;
+        }
+        if (this.thumbColor) {
+            styles["--cao-slide-toggle-thumb"] = this.thumbColor;
+        }
+        if (this.thumbCheckedColor) {
+            styles["--cao-slide-toggle-thumb-checked"] = this.thumbCheckedColor;
+        }
+        if (this.disabledTrackColor) {
+            styles["--cao-slide-toggle-track-disabled"] = this.disabledTrackColor;
+        }
+        if (this.disabledThumbColor) {
+            styles["--cao-slide-toggle-thumb-disabled"] = this.disabledThumbColor;
+        }
+        if (this.labelColor) {
+            styles["--cao-slide-toggle-label"] = this.labelColor;
+        }
+        if (this.disabledLabelColor) {
+            styles["--cao-slide-toggle-label-disabled"] = this.disabledLabelColor;
+        }
+        if (this.focusRingColor) {
+            styles["--cao-slide-toggle-focus-ring"] = this.focusRingColor;
+        }
+        if (this.trackWidth) {
+            styles["--cao-slide-toggle-track-width"] = this.trackWidth;
+        }
+        if (this.trackHeight) {
+            styles["--cao-slide-toggle-track-height"] = this.trackHeight;
+        }
+        if (this.thumbSize) {
+            styles["--cao-slide-toggle-thumb-size"] = this.thumbSize;
+        }
+        if (this.animationDuration) {
+            styles["--cao-slide-toggle-duration"] = this.animationDuration;
+        }
+        if (this.resolvedThumbIconColor) {
+            styles["--cao-slide-toggle-thumb-icon-color"] = this.resolvedThumbIconColor;
+        }
+        styles["--cao-slide-toggle-thumb-icon-size"] = this.toCssLength(this.thumbIconSize);
+        return styles;
+    }
+    toggle() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.updateChecked(!this.checked, true);
+    }
+    setChecked(value) {
+        if (this.isDisabled) {
+            return;
+        }
+        this.updateChecked(value, true);
+    }
+    enable() {
+        this.isDisabled = false;
+        this.cdr.markForCheck();
+    }
+    disable() {
+        this.isDisabled = true;
+        this.cdr.markForCheck();
+    }
+    onInputChange(event) {
+        const target = event.target;
+        this.updateChecked(target.checked, true);
+    }
+    onEnter(event) {
+        if (this.isDisabled) {
+            return;
+        }
+        event.preventDefault();
+        this.toggle();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.checked = !!value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    toCssLength(value) {
+        return typeof value === "number" ? `${value}px` : value;
+    }
+    updateChecked(value, emit) {
+        if (this.isDisabled) {
+            return;
+        }
+        this.checked = value;
+        this.onChange(value);
+        if (emit) {
+            this.checkedChange.emit(value);
+            this.toggleChange.emit({ checked: value, source: this });
+        }
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoSlideToggleComponent, isStandalone: true, selector: "cao-slide-toggle", inputs: { checked: "checked", isDisabled: "isDisabled", label: "label", labelPosition: "labelPosition", name: "name", id: "id", ariaLabel: "ariaLabel", dataCy: "dataCy", required: "required", trackColor: "trackColor", trackCheckedColor: "trackCheckedColor", thumbColor: "thumbColor", thumbCheckedColor: "thumbCheckedColor", disabledTrackColor: "disabledTrackColor", disabledThumbColor: "disabledThumbColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", trackWidth: "trackWidth", trackHeight: "trackHeight", thumbSize: "thumbSize", animationDuration: "animationDuration", thumbIcon: "thumbIcon", thumbCheckedIcon: "thumbCheckedIcon", isLucideThumbIcon: "isLucideThumbIcon", thumbIconColor: "thumbIconColor", thumbCheckedIconColor: "thumbCheckedIconColor", thumbIconSize: "thumbIconSize", thumbIconStrokeWidth: "thumbIconStrokeWidth", disabled: "disabled" }, outputs: { checkedChange: "checkedChange", toggleChange: "toggleChange" }, host: { properties: { "style": "this.hostStyles" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CaoSlideToggleComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"cao-slide-toggle\"\n  [class.cao-slide-toggle--checked]=\"checked\"\n  [class.cao-slide-toggle--disabled]=\"isDisabled\"\n  [class.cao-slide-toggle--label-before]=\"labelPosition === 'before'\">\n  <input\n    #input\n    class=\"cao-slide-toggle__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [checked]=\"checked\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [attr.name]=\"name || null\"\n    [attr.id]=\"id || null\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"onEnter($event)\" />\n\n  <span class=\"cao-slide-toggle__track\" aria-hidden=\"true\">\n    <span class=\"cao-slide-toggle__thumb\">\n      @if (resolvedThumbIcon) {\n        @if (isLucideThumbIcon) {\n          <svg\n            class=\"cao-slide-toggle__thumb-icon\"\n            [lucideIcon]=\"resolvedThumbIcon\"\n            [size]=\"thumbIconSize\"\n            [strokeWidth]=\"thumbIconStrokeWidth\"></svg>\n        } @else {\n          <img\n            class=\"cao-slide-toggle__thumb-icon\"\n            alt=\"\"\n            [src]=\"resolvedThumbIcon\" />\n        }\n      }\n    </span>\n  </span>\n\n  <span class=\"cao-slide-toggle__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{--cao-slide-toggle-track: #d1d5db;--cao-slide-toggle-track-checked: #4f46e5;--cao-slide-toggle-thumb: #ffffff;--cao-slide-toggle-thumb-checked: #ffffff;--cao-slide-toggle-track-disabled: #e5e7eb;--cao-slide-toggle-thumb-disabled: #f3f4f6;--cao-slide-toggle-label: #111827;--cao-slide-toggle-label-disabled: #9ca3af;--cao-slide-toggle-focus-ring: rgba(79, 70, 229, .35);--cao-slide-toggle-track-width: 36px;--cao-slide-toggle-track-height: 20px;--cao-slide-toggle-thumb-size: 16px;--cao-slide-toggle-thumb-icon-size: 12px;--cao-slide-toggle-thumb-icon-color: currentColor;--cao-slide-toggle-duration: .2s;display:inline-flex}.cao-slide-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-slide-toggle--disabled{cursor:not-allowed}.cao-slide-toggle__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-slide-toggle__track{position:relative;flex:none;width:var(--cao-slide-toggle-track-width);height:var(--cao-slide-toggle-track-height);border-radius:999px;background-color:var(--cao-slide-toggle-track);transition:background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb{position:absolute;top:50%;left:2px;display:flex;align-items:center;justify-content:center;width:var(--cao-slide-toggle-thumb-size);height:var(--cao-slide-toggle-thumb-size);overflow:hidden;border-radius:50%;background-color:var(--cao-slide-toggle-thumb);transform:translateY(-50%);transition:transform var(--cao-slide-toggle-duration) ease,background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb-icon{flex:none;width:var(--cao-slide-toggle-thumb-icon-size);height:var(--cao-slide-toggle-thumb-icon-size);color:var(--cao-slide-toggle-thumb-icon-color);pointer-events:none;object-fit:contain}.cao-slide-toggle__label{color:var(--cao-slide-toggle-label);font-size:.875rem;line-height:1.25rem}.cao-slide-toggle__label:empty{display:none}.cao-slide-toggle--checked .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-checked)}.cao-slide-toggle--checked .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-checked);transform:translate(calc(var(--cao-slide-toggle-track-width) - var(--cao-slide-toggle-thumb-size) - 4px),-50%)}.cao-slide-toggle--disabled .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb-icon{opacity:.65}.cao-slide-toggle--disabled .cao-slide-toggle__label{color:var(--cao-slide-toggle-label-disabled)}.cao-slide-toggle__input:focus-visible+.cao-slide-toggle__track{box-shadow:0 0 0 3px var(--cao-slide-toggle-focus-ring)}.cao-slide-toggle--label-before .cao-slide-toggle__track{order:2}.cao-slide-toggle--label-before .cao-slide-toggle__label{order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSlideToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-slide-toggle", standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CaoSlideToggleComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"cao-slide-toggle\"\n  [class.cao-slide-toggle--checked]=\"checked\"\n  [class.cao-slide-toggle--disabled]=\"isDisabled\"\n  [class.cao-slide-toggle--label-before]=\"labelPosition === 'before'\">\n  <input\n    #input\n    class=\"cao-slide-toggle__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [checked]=\"checked\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [attr.name]=\"name || null\"\n    [attr.id]=\"id || null\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"onEnter($event)\" />\n\n  <span class=\"cao-slide-toggle__track\" aria-hidden=\"true\">\n    <span class=\"cao-slide-toggle__thumb\">\n      @if (resolvedThumbIcon) {\n        @if (isLucideThumbIcon) {\n          <svg\n            class=\"cao-slide-toggle__thumb-icon\"\n            [lucideIcon]=\"resolvedThumbIcon\"\n            [size]=\"thumbIconSize\"\n            [strokeWidth]=\"thumbIconStrokeWidth\"></svg>\n        } @else {\n          <img\n            class=\"cao-slide-toggle__thumb-icon\"\n            alt=\"\"\n            [src]=\"resolvedThumbIcon\" />\n        }\n      }\n    </span>\n  </span>\n\n  <span class=\"cao-slide-toggle__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{--cao-slide-toggle-track: #d1d5db;--cao-slide-toggle-track-checked: #4f46e5;--cao-slide-toggle-thumb: #ffffff;--cao-slide-toggle-thumb-checked: #ffffff;--cao-slide-toggle-track-disabled: #e5e7eb;--cao-slide-toggle-thumb-disabled: #f3f4f6;--cao-slide-toggle-label: #111827;--cao-slide-toggle-label-disabled: #9ca3af;--cao-slide-toggle-focus-ring: rgba(79, 70, 229, .35);--cao-slide-toggle-track-width: 36px;--cao-slide-toggle-track-height: 20px;--cao-slide-toggle-thumb-size: 16px;--cao-slide-toggle-thumb-icon-size: 12px;--cao-slide-toggle-thumb-icon-color: currentColor;--cao-slide-toggle-duration: .2s;display:inline-flex}.cao-slide-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-slide-toggle--disabled{cursor:not-allowed}.cao-slide-toggle__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-slide-toggle__track{position:relative;flex:none;width:var(--cao-slide-toggle-track-width);height:var(--cao-slide-toggle-track-height);border-radius:999px;background-color:var(--cao-slide-toggle-track);transition:background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb{position:absolute;top:50%;left:2px;display:flex;align-items:center;justify-content:center;width:var(--cao-slide-toggle-thumb-size);height:var(--cao-slide-toggle-thumb-size);overflow:hidden;border-radius:50%;background-color:var(--cao-slide-toggle-thumb);transform:translateY(-50%);transition:transform var(--cao-slide-toggle-duration) ease,background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb-icon{flex:none;width:var(--cao-slide-toggle-thumb-icon-size);height:var(--cao-slide-toggle-thumb-icon-size);color:var(--cao-slide-toggle-thumb-icon-color);pointer-events:none;object-fit:contain}.cao-slide-toggle__label{color:var(--cao-slide-toggle-label);font-size:.875rem;line-height:1.25rem}.cao-slide-toggle__label:empty{display:none}.cao-slide-toggle--checked .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-checked)}.cao-slide-toggle--checked .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-checked);transform:translate(calc(var(--cao-slide-toggle-track-width) - var(--cao-slide-toggle-thumb-size) - 4px),-50%)}.cao-slide-toggle--disabled .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb-icon{opacity:.65}.cao-slide-toggle--disabled .cao-slide-toggle__label{color:var(--cao-slide-toggle-label-disabled)}.cao-slide-toggle__input:focus-visible+.cao-slide-toggle__track{box-shadow:0 0 0 3px var(--cao-slide-toggle-focus-ring)}.cao-slide-toggle--label-before .cao-slide-toggle__track{order:2}.cao-slide-toggle--label-before .cao-slide-toggle__label{order:1}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], trackColor: [{
+                type: Input
+            }], trackCheckedColor: [{
+                type: Input
+            }], thumbColor: [{
+                type: Input
+            }], thumbCheckedColor: [{
+                type: Input
+            }], disabledTrackColor: [{
+                type: Input
+            }], disabledThumbColor: [{
+                type: Input
+            }], labelColor: [{
+                type: Input
+            }], disabledLabelColor: [{
+                type: Input
+            }], focusRingColor: [{
+                type: Input
+            }], trackWidth: [{
+                type: Input
+            }], trackHeight: [{
+                type: Input
+            }], thumbSize: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], thumbIcon: [{
+                type: Input
+            }], thumbCheckedIcon: [{
+                type: Input
+            }], isLucideThumbIcon: [{
+                type: Input
+            }], thumbIconColor: [{
+                type: Input
+            }], thumbCheckedIconColor: [{
+                type: Input
+            }], thumbIconSize: [{
+                type: Input
+            }], thumbIconStrokeWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], toggleChange: [{
+                type: Output
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ["style"]
+            }] } });
+
+let nextRadioGroupId = 0;
+class CaoRadioGroupComponent {
+    value = undefined;
+    name = "";
+    isDisabled = false;
+    required = false;
+    orientation = "vertical";
+    labelPosition = "after";
+    compareWith = (option, value) => option === value;
+    color;
+    unselectedColor;
+    disabledColor;
+    labelColor;
+    disabledLabelColor;
+    focusRingColor;
+    size;
+    animationDuration;
+    gap;
+    ariaLabel = "";
+    ariaLabelledBy = "";
+    dataCy = "";
+    set disabled(value) {
+        this.isDisabled = value;
+        this.cdr.markForCheck();
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    valueChange = new EventEmitter();
+    selectionChange = new EventEmitter();
+    resolvedName = `cao-radio-group-${nextRadioGroupId++}`;
+    cdr = inject(ChangeDetectorRef);
+    formDisabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    get isEffectivelyDisabled() {
+        return this.isDisabled || this.formDisabled;
+    }
+    role = "radiogroup";
+    get isHorizontal() {
+        return this.orientation === "horizontal";
+    }
+    get isDisabledClass() {
+        return this.isEffectivelyDisabled;
+    }
+    get ariaLabelAttr() {
+        return this.ariaLabel || null;
+    }
+    get ariaLabelledByAttr() {
+        return this.ariaLabelledBy || null;
+    }
+    get ariaDisabledAttr() {
+        return this.isEffectivelyDisabled || null;
+    }
+    get ariaRequiredAttr() {
+        return this.required || null;
+    }
+    get dataCyAttr() {
+        return this.dataCy || null;
+    }
+    get hostStyles() {
+        const styles = {};
+        if (this.color) {
+            styles["--cao-radio-color"] = this.color;
+        }
+        if (this.unselectedColor) {
+            styles["--cao-radio-unselected"] = this.unselectedColor;
+        }
+        if (this.disabledColor) {
+            styles["--cao-radio-disabled"] = this.disabledColor;
+        }
+        if (this.labelColor) {
+            styles["--cao-radio-label"] = this.labelColor;
+        }
+        if (this.disabledLabelColor) {
+            styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
+        }
+        if (this.focusRingColor) {
+            styles["--cao-radio-focus-ring"] = this.focusRingColor;
+        }
+        if (this.size) {
+            styles["--cao-radio-size"] = this.size;
+        }
+        if (this.animationDuration) {
+            styles["--cao-radio-duration"] = this.animationDuration;
+        }
+        if (this.gap) {
+            styles["--cao-radio-gap"] = this.gap;
+        }
+        return styles;
+    }
+    get groupName() {
+        return this.name || this.resolvedName;
+    }
+    isValueSelected(value) {
+        return this.compareWith(this.value, value);
+    }
+    select(button) {
+        if (this.isEffectivelyDisabled || button.effectiveDisabled) {
+            return;
+        }
+        if (this.compareWith(this.value, button.value)) {
+            this.markAsTouched();
+            return;
+        }
+        this.value = button.value;
+        this.onChange(this.value);
+        this.valueChange.emit(this.value);
+        this.selectionChange.emit({ value: this.value, source: button });
+        this.markAsTouched();
+        this.cdr.markForCheck();
+    }
+    markAsTouched() {
+        this.onTouched();
+    }
+    enable() {
+        this.isDisabled = false;
+        this.cdr.markForCheck();
+    }
+    disable() {
+        this.isDisabled = true;
+        this.cdr.markForCheck();
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoRadioGroupComponent, isStandalone: true, selector: "cao-radio-group", inputs: { value: "value", name: "name", isDisabled: "isDisabled", required: "required", orientation: "orientation", labelPosition: "labelPosition", compareWith: "compareWith", color: "color", unselectedColor: "unselectedColor", disabledColor: "disabledColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", size: "size", animationDuration: "animationDuration", gap: "gap", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dataCy: "dataCy", disabled: "disabled" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.cao-radio-group--horizontal": "this.isHorizontal", "class.cao-radio-group--disabled": "this.isDisabledClass", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-labelledby": "this.ariaLabelledByAttr", "attr.aria-disabled": "this.ariaDisabledAttr", "attr.aria-required": "this.ariaRequiredAttr", "attr.data-cy": "this.dataCyAttr", "style": "this.hostStyles" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CaoRadioGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{--cao-radio-color: #4f46e5;--cao-radio-unselected: #6b7280;--cao-radio-disabled: #d1d5db;--cao-radio-label: #111827;--cao-radio-label-disabled: #9ca3af;--cao-radio-focus-ring: rgba(79, 70, 229, .35);--cao-radio-size: 20px;--cao-radio-duration: .2s;--cao-radio-gap: 8px;display:flex;flex-direction:column;gap:var(--cao-radio-gap)}:host(.cao-radio-group--horizontal){flex-direction:row;flex-wrap:wrap;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-radio-group", standalone: true, template: "<ng-content />", providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CaoRadioGroupComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--cao-radio-color: #4f46e5;--cao-radio-unselected: #6b7280;--cao-radio-disabled: #d1d5db;--cao-radio-label: #111827;--cao-radio-label-disabled: #9ca3af;--cao-radio-focus-ring: rgba(79, 70, 229, .35);--cao-radio-size: 20px;--cao-radio-duration: .2s;--cao-radio-gap: 8px;display:flex;flex-direction:column;gap:var(--cao-radio-gap)}:host(.cao-radio-group--horizontal){flex-direction:row;flex-wrap:wrap;align-items:center}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], unselectedColor: [{
+                type: Input
+            }], disabledColor: [{
+                type: Input
+            }], labelColor: [{
+                type: Input
+            }], disabledLabelColor: [{
+                type: Input
+            }], focusRingColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], role: [{
+                type: HostBinding,
+                args: ["attr.role"]
+            }], isHorizontal: [{
+                type: HostBinding,
+                args: ["class.cao-radio-group--horizontal"]
+            }], isDisabledClass: [{
+                type: HostBinding,
+                args: ["class.cao-radio-group--disabled"]
+            }], ariaLabelAttr: [{
+                type: HostBinding,
+                args: ["attr.aria-label"]
+            }], ariaLabelledByAttr: [{
+                type: HostBinding,
+                args: ["attr.aria-labelledby"]
+            }], ariaDisabledAttr: [{
+                type: HostBinding,
+                args: ["attr.aria-disabled"]
+            }], ariaRequiredAttr: [{
+                type: HostBinding,
+                args: ["attr.aria-required"]
+            }], dataCyAttr: [{
+                type: HostBinding,
+                args: ["attr.data-cy"]
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ["style"]
+            }] } });
+
+let nextRadioId = 0;
+class CaoRadioButtonComponent {
+    group;
+    value = undefined;
+    label = "";
+    isDisabled = false;
+    labelPosition;
+    id = "";
+    name = "";
+    ariaLabel = "";
+    ariaLabelledBy = "";
+    dataCy = "";
+    color;
+    unselectedColor;
+    disabledColor;
+    labelColor;
+    disabledLabelColor;
+    focusRingColor;
+    size;
+    animationDuration;
+    set disabled(value) {
+        this.isDisabled = value;
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    uid = `cao-radio-${nextRadioId++}`;
+    constructor(group) {
+        this.group = group;
+    }
+    get effectiveDisabled() {
+        return this.isDisabled || !!this.group?.isEffectivelyDisabled;
+    }
+    get effectiveLabelPosition() {
+        return this.labelPosition ?? this.group?.labelPosition ?? "after";
+    }
+    get effectiveName() {
+        return this.name || this.group?.groupName || this.uid;
+    }
+    get inputId() {
+        return this.id || this.uid;
+    }
+    get isSelected() {
+        return this.group?.isValueSelected(this.value) ?? false;
+    }
+    get isRequired() {
+        return this.group?.required ?? false;
+    }
+    get hostStyles() {
+        const styles = {};
+        if (this.color) {
+            styles["--cao-radio-color"] = this.color;
+        }
+        if (this.unselectedColor) {
+            styles["--cao-radio-unselected"] = this.unselectedColor;
+        }
+        if (this.disabledColor) {
+            styles["--cao-radio-disabled"] = this.disabledColor;
+        }
+        if (this.labelColor) {
+            styles["--cao-radio-label"] = this.labelColor;
+        }
+        if (this.disabledLabelColor) {
+            styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
+        }
+        if (this.focusRingColor) {
+            styles["--cao-radio-focus-ring"] = this.focusRingColor;
+        }
+        if (this.size) {
+            styles["--cao-radio-size"] = this.size;
+        }
+        if (this.animationDuration) {
+            styles["--cao-radio-duration"] = this.animationDuration;
+        }
+        return styles;
+    }
+    select() {
+        if (this.effectiveDisabled) {
+            return;
+        }
+        this.group?.select(this);
+    }
+    onBlur() {
+        this.group?.markAsTouched();
+    }
+    enable() {
+        this.isDisabled = false;
+    }
+    disable() {
+        this.isDisabled = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioButtonComponent, deps: [{ token: forwardRef(() => CaoRadioGroupComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoRadioButtonComponent, isStandalone: true, selector: "cao-radio-button", inputs: { value: "value", label: "label", isDisabled: "isDisabled", labelPosition: "labelPosition", id: "id", name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dataCy: "dataCy", color: "color", unselectedColor: "unselectedColor", disabledColor: "disabledColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", size: "size", animationDuration: "animationDuration", disabled: "disabled" }, host: { properties: { "style": "this.hostStyles" } }, ngImport: i0, template: "<label\n  class=\"cao-radio\"\n  [class.cao-radio--checked]=\"isSelected\"\n  [class.cao-radio--disabled]=\"effectiveDisabled\"\n  [class.cao-radio--label-before]=\"effectiveLabelPosition === 'before'\">\n  <input\n    #input\n    class=\"cao-radio__input\"\n    type=\"radio\"\n    [checked]=\"isSelected\"\n    [disabled]=\"effectiveDisabled\"\n    [required]=\"isRequired\"\n    [attr.name]=\"effectiveName\"\n    [attr.id]=\"inputId\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"select()\"\n    (blur)=\"onBlur()\" />\n\n  <span class=\"cao-radio__control\" aria-hidden=\"true\">\n    <span class=\"cao-radio__dot\"></span>\n  </span>\n\n  <span class=\"cao-radio__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{display:inline-flex}.cao-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-radio--disabled{cursor:not-allowed}.cao-radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-radio__control{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--cao-radio-size, 20px);height:var(--cao-radio-size, 20px);box-sizing:border-box;border:2px solid var(--cao-radio-unselected, #6b7280);border-radius:50%;transition:border-color var(--cao-radio-duration, .2s) ease}.cao-radio__dot{width:50%;height:50%;border-radius:50%;background-color:var(--cao-radio-color, #4f46e5);transform:scale(0);transition:transform var(--cao-radio-duration, .2s) ease,background-color var(--cao-radio-duration, .2s) ease}.cao-radio__label{color:var(--cao-radio-label, #111827);font-size:.875rem;line-height:1.25rem}.cao-radio__label:empty{display:none}.cao-radio:not(.cao-radio--disabled):hover .cao-radio__control,.cao-radio--checked .cao-radio__control{border-color:var(--cao-radio-color, #4f46e5)}.cao-radio--checked .cao-radio__dot{transform:scale(1)}.cao-radio--disabled .cao-radio__control{border-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__dot{background-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__label{color:var(--cao-radio-label-disabled, #9ca3af)}.cao-radio__input:focus-visible+.cao-radio__control{box-shadow:0 0 0 3px var(--cao-radio-focus-ring, rgba(79, 70, 229, .35))}.cao-radio--label-before .cao-radio__control{order:2}.cao-radio--label-before .cao-radio__label{order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-radio-button", standalone: true, imports: [CommonModule], template: "<label\n  class=\"cao-radio\"\n  [class.cao-radio--checked]=\"isSelected\"\n  [class.cao-radio--disabled]=\"effectiveDisabled\"\n  [class.cao-radio--label-before]=\"effectiveLabelPosition === 'before'\">\n  <input\n    #input\n    class=\"cao-radio__input\"\n    type=\"radio\"\n    [checked]=\"isSelected\"\n    [disabled]=\"effectiveDisabled\"\n    [required]=\"isRequired\"\n    [attr.name]=\"effectiveName\"\n    [attr.id]=\"inputId\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"select()\"\n    (blur)=\"onBlur()\" />\n\n  <span class=\"cao-radio__control\" aria-hidden=\"true\">\n    <span class=\"cao-radio__dot\"></span>\n  </span>\n\n  <span class=\"cao-radio__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{display:inline-flex}.cao-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-radio--disabled{cursor:not-allowed}.cao-radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-radio__control{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--cao-radio-size, 20px);height:var(--cao-radio-size, 20px);box-sizing:border-box;border:2px solid var(--cao-radio-unselected, #6b7280);border-radius:50%;transition:border-color var(--cao-radio-duration, .2s) ease}.cao-radio__dot{width:50%;height:50%;border-radius:50%;background-color:var(--cao-radio-color, #4f46e5);transform:scale(0);transition:transform var(--cao-radio-duration, .2s) ease,background-color var(--cao-radio-duration, .2s) ease}.cao-radio__label{color:var(--cao-radio-label, #111827);font-size:.875rem;line-height:1.25rem}.cao-radio__label:empty{display:none}.cao-radio:not(.cao-radio--disabled):hover .cao-radio__control,.cao-radio--checked .cao-radio__control{border-color:var(--cao-radio-color, #4f46e5)}.cao-radio--checked .cao-radio__dot{transform:scale(1)}.cao-radio--disabled .cao-radio__control{border-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__dot{background-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__label{color:var(--cao-radio-label-disabled, #9ca3af)}.cao-radio__input:focus-visible+.cao-radio__control{box-shadow:0 0 0 3px var(--cao-radio-focus-ring, rgba(79, 70, 229, .35))}.cao-radio--label-before .cao-radio__control{order:2}.cao-radio--label-before .cao-radio__label{order:1}\n"] }]
+        }], ctorParameters: () => [{ type: CaoRadioGroupComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => CaoRadioGroupComponent)]
+                }] }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], unselectedColor: [{
+                type: Input
+            }], disabledColor: [{
+                type: Input
+            }], labelColor: [{
+                type: Input
+            }], disabledLabelColor: [{
+                type: Input
+            }], focusRingColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ["style"]
+            }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -3623,5 +4243,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map