npm - @agorapulse/ui-components - Versions diffs - 22.0.11-beta.1 → 22.0.13 - Mend

@agorapulse/ui-components 22.0.11-beta.1 → 22.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/fesm2022/agorapulse-ui-components-password-input.mjs CHANGED Viewed

@@ -63,11 +63,11 @@ class PasswordInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PasswordInputComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: PasswordInputComponent, isStandalone: true, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n        (click)=\"toggleInputType()\" />\n</div>\n", styles: [":host{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid var(--comp-input-border-error-color)}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid var(--comp-input-border-success-color)}.input-group-append{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: PasswordInputComponent, isStandalone: true, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n        (click)=\"toggleInputType()\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-password-input', providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, imports: [SymbolComponent, NgClass, ReactiveFormsModule], template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n        (click)=\"toggleInputType()\" />\n</div>\n", styles: [":host{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid var(--comp-input-border-error-color)}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid var(--comp-input-border-success-color)}.input-group-append{cursor:pointer}\n"] }]
+            args: [{ selector: 'ap-password-input', providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, imports: [SymbolComponent, NgClass, ReactiveFormsModule], template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n        (click)=\"toggleInputType()\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }], propDecorators: { name: [{
                 type: Input
             }], placeholder: [{

package/fesm2022/agorapulse-ui-components-password-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function /\nimport { SymbolComponent, SymbolRegistry, apEyeOff, apEyeOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n OnInit,\n ViewChild,\n forwardRef,\n inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n};\n\n@Component({\n selector: 'ap-password-input',\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n static type = ['text', 'password'];\n inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n @Input() name = '';\n @Input() placeholder = '';\n @Input() fullWidth: boolean = false;\n disabled: boolean = false;\n\n @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n controler: FormControl = new FormControl('');\n changes!: Subscription;\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([apEyeOff, apEyeOn]);\n }\n /\n Change between visible and hidden password\n /\n toggleInputType(): void {\n this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange = (password: string) => {};\n\n onTouch = () => {};\n\n writeValue(obj: string): void {\n this.controler.setValue(obj);\n }\n\n registerOnChange(fn: (password: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n ngOnInit(): void {\n this.changes = this.controler.valueChanges.subscribe((val: string) => {\n if (this.onChange) {\n this.onChange(val);\n }\n });\n }\n\n ngOnDestroy(): void {\n if (this.changes) {\n this.changes.unsubscribe();\n }\n }\n}\n","<div\n class=\"input-group\"\n [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n <input\n #passwordInput\n autocomplete=\"password\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [formControl]=\"controler\"\n (blur)=\"onTouch()\" />\n <ap-symbol\n class=\"input-group-append\"\n size=\"sm\"\n state=\"full\"\n [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n (click)=\"toggleInputType()\" />\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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~~uTAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDWc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,wSAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAE9C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,SAAA,EAGlB,CAAC,+BAA+B,CAAC,mBAC3B,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,EAAE,OAAO,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,4kBAAA,EAAA,MAAA,EAAA,CAAA,~~uTAAA~~,CAAA,EAAA;;sBAMvD;;sBACA;;sBACA;;sBAGA,SAAS;uBAAC,eAAe;;;AEzC9B;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function /\nimport { SymbolComponent, SymbolRegistry, apEyeOff, apEyeOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n OnInit,\n ViewChild,\n forwardRef,\n inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n};\n\n@Component({\n selector: 'ap-password-input',\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n static type = ['text', 'password'];\n inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n @Input() name = '';\n @Input() placeholder = '';\n @Input() fullWidth: boolean = false;\n disabled: boolean = false;\n\n @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n controler: FormControl = new FormControl('');\n changes!: Subscription;\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([apEyeOff, apEyeOn]);\n }\n /\n Change between visible and hidden password\n /\n toggleInputType(): void {\n this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange = (password: string) => {};\n\n onTouch = () => {};\n\n writeValue(obj: string): void {\n this.controler.setValue(obj);\n }\n\n registerOnChange(fn: (password: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n ngOnInit(): void {\n this.changes = this.controler.valueChanges.subscribe((val: string) => {\n if (this.onChange) {\n this.onChange(val);\n }\n });\n }\n\n ngOnDestroy(): void {\n if (this.changes) {\n this.changes.unsubscribe();\n }\n }\n}\n","<div\n class=\"input-group\"\n [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n <input\n #passwordInput\n autocomplete=\"password\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [formControl]=\"controler\"\n (blur)=\"onTouch()\" />\n <ap-symbol\n class=\"input-group-append\"\n size=\"sm\"\n state=\"full\"\n [symbolId]=\"inputType === 'text' ? 'eye-on' : 'eye-off'\"\n (click)=\"toggleInputType()\" />\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-phone-number-input.mjs CHANGED Viewed

@@ -139,7 +139,7 @@ class PhoneNumberInputComponent {
                 useExisting: forwardRef(() => PhoneNumberInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n        #select\n        apSelectSingle\n        data-test=\"subscription-billing-infos-phoneNumberCode\"\n        class=\"ap-phone-number-code-select ap-select\"\n        bindLabel=\"countryName\"\n        bindValue=\"countryCode\"\n        notFoundText=\"\"\n        formControlName=\"countryCode\"\n        appendTo=\"body\"\n        [clearable]=\"false\"\n        [items]=\"codeNumberInfos\"\n        [searchFn]=\"phoneNumberCodeSearchFn\"\n        (blur)=\"onTouched()\">\n        <ng-template\n            let-item=\"item\"\n            ng-label-tmp>\n            @if (item && item.countryCode) {\n                <div class=\"flag\">\n                    @if (!!flagsBucketUrl) {\n                        <img\n                            width=\"24\"\n                            height=\"16\"\n                            alt=\"flag\"\n                            [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                    } @else {\n                        <span>{{ item.countryCode }}</span>\n                    }\n                </div>\n            }\n        </ng-template>\n        <ng-template\n            let-item=\"item\"\n            let-item$=\"item$\"\n            ng-option-tmp>\n            <ap-dropdown-item-single-one-line\n                [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                [selected]=\"item$.selected\"\n                [roundedAvatar]=\"false\" />\n        </ng-template>\n        <ng-template\n            let-searchTerm=\"searchTerm\"\n            ng-header-tmp>\n            <ap-dropdown-search-form\n                [searchPlaceholder]=\"searchPlaceholder\"\n                [select]=\"select\" />\n        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n        }\n        <input\n            apInput\n            class=\"phone-field\"\n            data-test=\"subscription-billing-infos-phoneNumberInput\"\n            type=\"text\"\n            data-recurly=\"phone\"\n            formControlName=\"phoneNumber\"\n            [placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            (beforeinput)=\"filterChars($event)\"\n            (blur)=\"onTouched()\" />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:var(--sys-radius-inner);object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputPrefixComponent, selector: "ap-input-prefix" }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked", "standaloneModeEnabled"], outputs: ["lockedFeatureClicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n        #select\n        apSelectSingle\n        data-test=\"subscription-billing-infos-phoneNumberCode\"\n        class=\"ap-phone-number-code-select ap-select\"\n        bindLabel=\"countryName\"\n        bindValue=\"countryCode\"\n        notFoundText=\"\"\n        formControlName=\"countryCode\"\n        appendTo=\"body\"\n        [clearable]=\"false\"\n        [items]=\"codeNumberInfos\"\n        [searchFn]=\"phoneNumberCodeSearchFn\"\n        (blur)=\"onTouched()\">\n        <ng-template\n            let-item=\"item\"\n            ng-label-tmp>\n            @if (item && item.countryCode) {\n                <div class=\"flag\">\n                    @if (!!flagsBucketUrl) {\n                        <img\n                            width=\"24\"\n                            height=\"16\"\n                            alt=\"flag\"\n                            [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                    } @else {\n                        <span>{{ item.countryCode }}</span>\n                    }\n                </div>\n            }\n        </ng-template>\n        <ng-template\n            let-item=\"item\"\n            let-item$=\"item$\"\n            ng-option-tmp>\n            <ap-dropdown-item-single-one-line\n                [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                [selected]=\"item$.selected\"\n                [roundedAvatar]=\"false\" />\n        </ng-template>\n        <ng-template\n            let-searchTerm=\"searchTerm\"\n            ng-header-tmp>\n            <ap-dropdown-search-form\n                [searchPlaceholder]=\"searchPlaceholder\"\n                [select]=\"select\" />\n        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n        }\n        <input\n            apInput\n            class=\"phone-field\"\n            data-test=\"subscription-billing-infos-phoneNumberInput\"\n            type=\"text\"\n            data-recurly=\"phone\"\n            formControlName=\"phoneNumber\"\n            [placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            (beforeinput)=\"filterChars($event)\"\n            (blur)=\"onTouched()\" />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputPrefixComponent, selector: "ap-input-prefix" }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked", "standaloneModeEnabled"], outputs: ["lockedFeatureClicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => PhoneNumberInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n        #select\n        apSelectSingle\n        data-test=\"subscription-billing-infos-phoneNumberCode\"\n        class=\"ap-phone-number-code-select ap-select\"\n        bindLabel=\"countryName\"\n        bindValue=\"countryCode\"\n        notFoundText=\"\"\n        formControlName=\"countryCode\"\n        appendTo=\"body\"\n        [clearable]=\"false\"\n        [items]=\"codeNumberInfos\"\n        [searchFn]=\"phoneNumberCodeSearchFn\"\n        (blur)=\"onTouched()\">\n        <ng-template\n            let-item=\"item\"\n            ng-label-tmp>\n            @if (item && item.countryCode) {\n                <div class=\"flag\">\n                    @if (!!flagsBucketUrl) {\n                        <img\n                            width=\"24\"\n                            height=\"16\"\n                            alt=\"flag\"\n                            [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                    } @else {\n                        <span>{{ item.countryCode }}</span>\n                    }\n                </div>\n            }\n        </ng-template>\n        <ng-template\n            let-item=\"item\"\n            let-item$=\"item$\"\n            ng-option-tmp>\n            <ap-dropdown-item-single-one-line\n                [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                [selected]=\"item$.selected\"\n                [roundedAvatar]=\"false\" />\n        </ng-template>\n        <ng-template\n            let-searchTerm=\"searchTerm\"\n            ng-header-tmp>\n            <ap-dropdown-search-form\n                [searchPlaceholder]=\"searchPlaceholder\"\n                [select]=\"select\" />\n        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n        }\n        <input\n            apInput\n            class=\"phone-field\"\n            data-test=\"subscription-billing-infos-phoneNumberInput\"\n            type=\"text\"\n            data-recurly=\"phone\"\n            formControlName=\"phoneNumber\"\n            [placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            (beforeinput)=\"filterChars($event)\"\n            (blur)=\"onTouched()\" />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:var(--sys-radius-inner);object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n        #select\n        apSelectSingle\n        data-test=\"subscription-billing-infos-phoneNumberCode\"\n        class=\"ap-phone-number-code-select ap-select\"\n        bindLabel=\"countryName\"\n        bindValue=\"countryCode\"\n        notFoundText=\"\"\n        formControlName=\"countryCode\"\n        appendTo=\"body\"\n        [clearable]=\"false\"\n        [items]=\"codeNumberInfos\"\n        [searchFn]=\"phoneNumberCodeSearchFn\"\n        (blur)=\"onTouched()\">\n        <ng-template\n            let-item=\"item\"\n            ng-label-tmp>\n            @if (item && item.countryCode) {\n                <div class=\"flag\">\n                    @if (!!flagsBucketUrl) {\n                        <img\n                            width=\"24\"\n                            height=\"16\"\n                            alt=\"flag\"\n                            [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                    } @else {\n                        <span>{{ item.countryCode }}</span>\n                    }\n                </div>\n            }\n        </ng-template>\n        <ng-template\n            let-item=\"item\"\n            let-item$=\"item$\"\n            ng-option-tmp>\n            <ap-dropdown-item-single-one-line\n                [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                [selected]=\"item$.selected\"\n                [roundedAvatar]=\"false\" />\n        </ng-template>\n        <ng-template\n            let-searchTerm=\"searchTerm\"\n            ng-header-tmp>\n            <ap-dropdown-search-form\n                [searchPlaceholder]=\"searchPlaceholder\"\n                [select]=\"select\" />\n        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n        }\n        <input\n            apInput\n            class=\"phone-field\"\n            data-test=\"subscription-billing-infos-phoneNumberInput\"\n            type=\"text\"\n            data-recurly=\"phone\"\n            formControlName=\"phoneNumber\"\n            [placeholder]=\"placeholder\"\n            [attr.name]=\"name\"\n            (beforeinput)=\"filterChars($event)\"\n            (blur)=\"onTouched()\" />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }], propDecorators: { errorsDisplayForced: [{
                 type: Input
             }], flagsBucketUrl: [{

package/fesm2022/agorapulse-ui-components-phone-number-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-phone-number-input.mjs","sources":["../../../libs/ui-components/phone-number-input/src/phone-number-input.component.ts","../../../libs/ui-components/phone-number-input/src/phone-number-input.component.html","../../../libs/ui-components/phone-number-input/src/agorapulse-ui-components-phone-number-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function /\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent, InputPrefixComponent } from '@agorapulse/ui-components/input-group';\nimport { DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective } from '@agorapulse/ui-components/select';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnInit,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n FormGroup,\n FormsModule,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators,\n} from '@angular/forms';\nimport { NgSelectModule } from '@ng-select/ng-select';\n\nexport interface PhoneNumberInfo {\n countryCode: string;\n countryName: string;\n phoneNumberCode: string;\n}\n\nexport interface Phone {\n phoneNumber: string;\n phoneNumberCode: string;\n}\n\nconst NUMBER_ONLY_PATTERN = /[0-9]/;\n\nconst DEFAULT_COUNTRY_CODE = 'US';\nconst DEFAULT_PHONE_NUMBER_CODE = '+1';\n\n@Component({\n selector: 'ap-phone-number-input',\n templateUrl: 'phone-number-input.component.html',\n styleUrls: ['phone-number-input.component.scss'],\n imports: [\n FormsModule,\n NgSelectModule,\n InputGroupComponent,\n SelectBaseDirective,\n InputDirective,\n InputPrefixComponent,\n DropdownItemSingleOneLineComponent,\n ReactiveFormsModule,\n NgOptimizedImage,\n DropdownSearchFormComponent,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PhoneNumberInputComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => PhoneNumberInputComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n private readonly destroyRef = inject(DestroyRef);\n private readonly cdr = inject(ChangeDetectorRef);\n\n @Input() set errorsDisplayForced(errorsDisplayForced: boolean) {\n if (errorsDisplayForced) {\n this.formGroup.markAllAsTouched();\n Object.values(this.formGroup.controls).forEach(control => control.markAsDirty());\n this.formGroup.updateValueAndValidity();\n }\n }\n @Input({ required: true }) flagsBucketUrl!: string;\n @Input({ required: true }) set phoneNumberInfos(phoneNumberInfos: PhoneNumberInfo[]) {\n this.codeNumberInfos = phoneNumberInfos ?? [];\n this.countryCodeMappedPhoneNumberInfos = phoneNumberInfos.reduce(\n (acc, phoneNumberInfo) => {\n acc[phoneNumberInfo.countryCode as string] = phoneNumberInfo;\n return acc;\n },\n {} as Record<string, PhoneNumberInfo>\n );\n }\n codeNumberInfos: PhoneNumberInfo[] = [];\n countryCodeMappedPhoneNumberInfos: Record<string, PhoneNumberInfo> = {};\n\n @Input({ required: true }) name!: string;\n @Input({ required: true }) placeholder!: string;\n @Input({ required: true }) searchPlaceholder!: string;\n @Input() set phoneNumber(phoneNumber: string) {\n this.formGroup.controls.phoneNumber.setValue(phoneNumber);\n }\n @Input() set phoneNumberCode(phoneNumberCode: string) {\n this.formGroup.controls.countryCode.setValue(phoneNumberCode);\n }\n @Input() set initialCountryCode(initialCountryCode: string) {\n const firstValue = this.findPhoneNumberInfoByCountryCode(initialCountryCode)?.countryCode;\n if (firstValue) {\n this.formGroup.patchValue({ countryCode: firstValue });\n }\n }\n\n @Output() changePhoneNumber: EventEmitter<string> = new EventEmitter<string>();\n @Output() changePhoneNumberCode: EventEmitter<string> = new EventEmitter<string>();\n\n formGroup = new FormGroup({\n countryCode: new FormControl<string>(DEFAULT_COUNTRY_CODE, [Validators.required]),\n phoneNumber: new FormControl<string>('', [Validators.required]),\n });\n\n public onTouched: any = () => {};\n public onChange: any = () => {};\n\n constructor(symbolRegistry: SymbolRegistry) {\n symbolRegistry.registerSymbols([apCheck]);\n }\n\n ngOnInit(): void {\n // Subscribe to form changes to propagate them to the parent component\n this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n let phoneNumberCode = DEFAULT_PHONE_NUMBER_CODE;\n if (value.countryCode) {\n const phoneNumberInfo = this.findPhoneNumberInfoByCountryCode(value.countryCode);\n if (phoneNumberInfo) {\n phoneNumberCode = phoneNumberInfo.phoneNumberCode;\n }\n }\n if (this.onChange && phoneNumberCode) {\n this.onChange({\n phoneNumber: value.phoneNumber,\n phoneNumberCode,\n });\n }\n if (value.phoneNumber !== this.phoneNumber) {\n this.changePhoneNumber.emit(value.phoneNumber ?? '');\n }\n if (phoneNumberCode !== this.phoneNumberCode) {\n this.changePhoneNumberCode.emit(phoneNumberCode ?? '');\n }\n this.cdr.markForCheck();\n });\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n validate(): ValidationErrors \| null {\n return this.formGroup.valid ? null : { phoneNumber: 'invalid', ...this.formGroup.errors };\n }\n\n writeValue(phone: Phone \| null): void {\n // Avoid setting an empty value for the phone number code, it should always have a value\n if (phone === null \|\| !phone.phoneNumberCode) {\n this.formGroup.patchValue({ phoneNumber: phone?.phoneNumberCode ?? '' });\n } else {\n this.formGroup.patchValue(phone);\n }\n }\n\n phoneNumberCodeSearchFn(term: string, item: PhoneNumberInfo): boolean {\n const termCased = term.toLocaleLowerCase();\n return item.countryName.toLocaleLowerCase().indexOf(termCased) > -1 \|\| item.countryCode.toLocaleLowerCase().indexOf(termCased) > -1;\n }\n\n markAsTouched(): void {\n this.formGroup.markAllAsTouched();\n }\n\n /\n Filter the phone number input to only allow numbers\n /\n filterChars(event: InputEvent): void {\n if (event.inputType !== 'insertText') {\n return;\n }\n const inputChar: string \| null = event.data;\n if (inputChar && !NUMBER_ONLY_PATTERN.test(inputChar)) {\n event.preventDefault();\n }\n }\n\n private findPhoneNumberInfoByCountryCode(countryCode: string): PhoneNumberInfo \| undefined {\n return this.codeNumberInfos.find(codeInfo => codeInfo.countryCode === countryCode);\n }\n}\n","<ng-container [formGroup]=\"formGroup\">\n <ng-select\n #select\n apSelectSingle\n data-test=\"subscription-billing-infos-phoneNumberCode\"\n class=\"ap-phone-number-code-select ap-select\"\n bindLabel=\"countryName\"\n bindValue=\"countryCode\"\n notFoundText=\"\"\n formControlName=\"countryCode\"\n appendTo=\"body\"\n [clearable]=\"false\"\n [items]=\"codeNumberInfos\"\n [searchFn]=\"phoneNumberCodeSearchFn\"\n (blur)=\"onTouched()\">\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n @if (item && item.countryCode) {\n <div class=\"flag\">\n @if (!!flagsBucketUrl) {\n <img\n width=\"24\"\n height=\"16\"\n alt=\"flag\"\n [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n } @else {\n <span>{{ item.countryCode }}</span>\n }\n </div>\n }\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-single-one-line\n [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n [selected]=\"item$.selected\"\n [roundedAvatar]=\"false\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"searchPlaceholder\"\n [select]=\"select\" />\n </ng-template>\n </ng-select>\n <ap-input-group class=\"phone-number-input-group\">\n @let countryCode = formGroup.controls.countryCode.value;\n @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n @if (phoneNumberCode) {\n <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n }\n <input\n apInput\n class=\"phone-field\"\n data-test=\"subscription-billing-infos-phoneNumberInput\"\n type=\"text\"\n data-recurly=\"phone\"\n formControlName=\"phoneNumber\"\n [placeholder]=\"placeholder\"\n [attr.name]=\"name\"\n (beforeinput)=\"filterChars($event)\"\n (blur)=\"onTouched()\" />\n </ap-input-group>\n</ng-container>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-phone-number-input.mjs","sources":["../../../libs/ui-components/phone-number-input/src/phone-number-input.component.ts","../../../libs/ui-components/phone-number-input/src/phone-number-input.component.html","../../../libs/ui-components/phone-number-input/src/agorapulse-ui-components-phone-number-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function /\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent, InputPrefixComponent } from '@agorapulse/ui-components/input-group';\nimport { DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective } from '@agorapulse/ui-components/select';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnInit,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n FormGroup,\n FormsModule,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators,\n} from '@angular/forms';\nimport { NgSelectModule } from '@ng-select/ng-select';\n\nexport interface PhoneNumberInfo {\n countryCode: string;\n countryName: string;\n phoneNumberCode: string;\n}\n\nexport interface Phone {\n phoneNumber: string;\n phoneNumberCode: string;\n}\n\nconst NUMBER_ONLY_PATTERN = /[0-9]/;\n\nconst DEFAULT_COUNTRY_CODE = 'US';\nconst DEFAULT_PHONE_NUMBER_CODE = '+1';\n\n@Component({\n selector: 'ap-phone-number-input',\n templateUrl: 'phone-number-input.component.html',\n styleUrls: ['phone-number-input.component.scss'],\n imports: [\n FormsModule,\n NgSelectModule,\n InputGroupComponent,\n SelectBaseDirective,\n InputDirective,\n InputPrefixComponent,\n DropdownItemSingleOneLineComponent,\n ReactiveFormsModule,\n NgOptimizedImage,\n DropdownSearchFormComponent,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PhoneNumberInputComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => PhoneNumberInputComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n private readonly destroyRef = inject(DestroyRef);\n private readonly cdr = inject(ChangeDetectorRef);\n\n @Input() set errorsDisplayForced(errorsDisplayForced: boolean) {\n if (errorsDisplayForced) {\n this.formGroup.markAllAsTouched();\n Object.values(this.formGroup.controls).forEach(control => control.markAsDirty());\n this.formGroup.updateValueAndValidity();\n }\n }\n @Input({ required: true }) flagsBucketUrl!: string;\n @Input({ required: true }) set phoneNumberInfos(phoneNumberInfos: PhoneNumberInfo[]) {\n this.codeNumberInfos = phoneNumberInfos ?? [];\n this.countryCodeMappedPhoneNumberInfos = phoneNumberInfos.reduce(\n (acc, phoneNumberInfo) => {\n acc[phoneNumberInfo.countryCode as string] = phoneNumberInfo;\n return acc;\n },\n {} as Record<string, PhoneNumberInfo>\n );\n }\n codeNumberInfos: PhoneNumberInfo[] = [];\n countryCodeMappedPhoneNumberInfos: Record<string, PhoneNumberInfo> = {};\n\n @Input({ required: true }) name!: string;\n @Input({ required: true }) placeholder!: string;\n @Input({ required: true }) searchPlaceholder!: string;\n @Input() set phoneNumber(phoneNumber: string) {\n this.formGroup.controls.phoneNumber.setValue(phoneNumber);\n }\n @Input() set phoneNumberCode(phoneNumberCode: string) {\n this.formGroup.controls.countryCode.setValue(phoneNumberCode);\n }\n @Input() set initialCountryCode(initialCountryCode: string) {\n const firstValue = this.findPhoneNumberInfoByCountryCode(initialCountryCode)?.countryCode;\n if (firstValue) {\n this.formGroup.patchValue({ countryCode: firstValue });\n }\n }\n\n @Output() changePhoneNumber: EventEmitter<string> = new EventEmitter<string>();\n @Output() changePhoneNumberCode: EventEmitter<string> = new EventEmitter<string>();\n\n formGroup = new FormGroup({\n countryCode: new FormControl<string>(DEFAULT_COUNTRY_CODE, [Validators.required]),\n phoneNumber: new FormControl<string>('', [Validators.required]),\n });\n\n public onTouched: any = () => {};\n public onChange: any = () => {};\n\n constructor(symbolRegistry: SymbolRegistry) {\n symbolRegistry.registerSymbols([apCheck]);\n }\n\n ngOnInit(): void {\n // Subscribe to form changes to propagate them to the parent component\n this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n let phoneNumberCode = DEFAULT_PHONE_NUMBER_CODE;\n if (value.countryCode) {\n const phoneNumberInfo = this.findPhoneNumberInfoByCountryCode(value.countryCode);\n if (phoneNumberInfo) {\n phoneNumberCode = phoneNumberInfo.phoneNumberCode;\n }\n }\n if (this.onChange && phoneNumberCode) {\n this.onChange({\n phoneNumber: value.phoneNumber,\n phoneNumberCode,\n });\n }\n if (value.phoneNumber !== this.phoneNumber) {\n this.changePhoneNumber.emit(value.phoneNumber ?? '');\n }\n if (phoneNumberCode !== this.phoneNumberCode) {\n this.changePhoneNumberCode.emit(phoneNumberCode ?? '');\n }\n this.cdr.markForCheck();\n });\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n validate(): ValidationErrors \| null {\n return this.formGroup.valid ? null : { phoneNumber: 'invalid', ...this.formGroup.errors };\n }\n\n writeValue(phone: Phone \| null): void {\n // Avoid setting an empty value for the phone number code, it should always have a value\n if (phone === null \|\| !phone.phoneNumberCode) {\n this.formGroup.patchValue({ phoneNumber: phone?.phoneNumberCode ?? '' });\n } else {\n this.formGroup.patchValue(phone);\n }\n }\n\n phoneNumberCodeSearchFn(term: string, item: PhoneNumberInfo): boolean {\n const termCased = term.toLocaleLowerCase();\n return item.countryName.toLocaleLowerCase().indexOf(termCased) > -1 \|\| item.countryCode.toLocaleLowerCase().indexOf(termCased) > -1;\n }\n\n markAsTouched(): void {\n this.formGroup.markAllAsTouched();\n }\n\n /\n Filter the phone number input to only allow numbers\n /\n filterChars(event: InputEvent): void {\n if (event.inputType !== 'insertText') {\n return;\n }\n const inputChar: string \| null = event.data;\n if (inputChar && !NUMBER_ONLY_PATTERN.test(inputChar)) {\n event.preventDefault();\n }\n }\n\n private findPhoneNumberInfoByCountryCode(countryCode: string): PhoneNumberInfo \| undefined {\n return this.codeNumberInfos.find(codeInfo => codeInfo.countryCode === countryCode);\n }\n}\n","<ng-container [formGroup]=\"formGroup\">\n <ng-select\n #select\n apSelectSingle\n data-test=\"subscription-billing-infos-phoneNumberCode\"\n class=\"ap-phone-number-code-select ap-select\"\n bindLabel=\"countryName\"\n bindValue=\"countryCode\"\n notFoundText=\"\"\n formControlName=\"countryCode\"\n appendTo=\"body\"\n [clearable]=\"false\"\n [items]=\"codeNumberInfos\"\n [searchFn]=\"phoneNumberCodeSearchFn\"\n (blur)=\"onTouched()\">\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n @if (item && item.countryCode) {\n <div class=\"flag\">\n @if (!!flagsBucketUrl) {\n <img\n width=\"24\"\n height=\"16\"\n alt=\"flag\"\n [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n } @else {\n <span>{{ item.countryCode }}</span>\n }\n </div>\n }\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-single-one-line\n [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n [selected]=\"item$.selected\"\n [roundedAvatar]=\"false\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"searchPlaceholder\"\n [select]=\"select\" />\n </ng-template>\n </ng-select>\n <ap-input-group class=\"phone-number-input-group\">\n @let countryCode = formGroup.controls.countryCode.value;\n @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n @if (phoneNumberCode) {\n <ap-input-prefix>{{ phoneNumberCode }}</ap-input-prefix>\n }\n <input\n apInput\n class=\"phone-field\"\n data-test=\"subscription-billing-infos-phoneNumberInput\"\n type=\"text\"\n data-recurly=\"phone\"\n formControlName=\"phoneNumber\"\n [placeholder]=\"placeholder\"\n [attr.name]=\"name\"\n (beforeinput)=\"filterChars($event)\"\n (blur)=\"onTouched()\" />\n </ap-input-group>\n</ng-container>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-radio-button-card.mjs CHANGED Viewed

@@ -98,11 +98,11 @@ class RadioButtonCardComponent {
         this.onModelTouched = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioButtonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RadioButtonCardComponent, isStandalone: true, selector: "ap-radio-button-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, radioId: { classPropertyName: "radioId", publicName: "radioId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, linkTitle: { classPropertyName: "linkTitle", publicName: "linkTitle", isSignal: true, isRequired: false, transformFunction: null }, titleSymbolId: { classPropertyName: "titleSymbolId", publicName: "titleSymbolId", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, statusBadge: { classPropertyName: "statusBadge", publicName: "statusBadge", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null } }, providers: [withSymbols(apInfo)], ngImport: i0, template: "<div\n    class=\"radio-button-card__container\"\n    [class.radio-button-card__container--default]=\"mode() === 'default'\"\n    [class.radio-button-card__container--card]=\"mode() === 'card'\"\n    [class.radio-button-card__container--locked]=\"featureLocked()\"\n    [class.radio-button-card__container--error]=\"hasError()\"\n    [class.radio-button-card__container--centered]=\"centeredLayout()\">\n    <input\n        type=\"radio\"\n        class=\"radio-button-card__input\"\n        [attr.id]=\"radioId()\"\n        [attr.name]=\"computedName()\"\n        [attr.aria-checked]=\"checked()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        [value]=\"value()\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled() || featureLocked()\"\n        (change)=\"select()\" />\n    <label\n        class=\"radio-button-card__label\"\n        [attr.for]=\"radioId()\">\n        @if (featureLocked()) {\n            <div class=\"radio-button-card__lock-icon\">\n                <ap-symbol symbolId=\"feature-lock\" />\n            </div>\n        } @else {\n            <div class=\"radio-button-card__indicator\">\n                <div class=\"radio-button-card__indicator-outer\">\n                    <div class=\"radio-button-card__indicator-inner\"></div>\n                </div>\n            </div>\n        }\n        <div class=\"radio-button-card__content\">\n            @if (customContentEnabled()) {\n                <div class=\"radio-button-card__structured-content\">\n                    <div class=\"radio-button-card__header\">\n                        <div class=\"radio-button-card__header-left\">\n                            @if (titleSymbolId()) {\n                                <ap-symbol\n                                    class=\"radio-button-card__title-symbol\"\n                                    color=\"grey-blue\"\n                                    [symbolId]=\"titleSymbolId()\" />\n                            }\n                            @if (title()) {\n                                <div class=\"radio-button-card__title\">{{ title() }}</div>\n                            }\n                        </div>\n                        <div class=\"radio-button-card__header-right\">\n                            @if (statusBadge()) {\n                                <ap-status\n                                    class=\"radio-button-card__status\"\n                                    color=\"grey\"\n                                    [dot]=\"false\">\n                                    {{ statusBadge() }}\n                                </ap-status>\n                            }\n                            @if (tooltipText()) {\n                                <ap-symbol\n                                    apTooltipPosition=\"top\"\n                                    class=\"radio-button-card__tooltip-icon\"\n                                    symbolId=\"info\"\n                                    [apTooltip]=\"tooltipText()\" />\n                            }\n                        </div>\n                    </div>\n                    @if (description()) {\n                        <div class=\"radio-button-card__description\">{{ description() }}</div>\n                    }\n                    @if (linkUrl()) {\n                        <a\n                            class=\"standalone radio-button-card__link\"\n                            [href]=\"linkUrl()\"\n                            (click)=\"$event.stopPropagation()\">\n                            {{ linkTitle() }}\n                        </a>\n                    }\n                </div>\n            } @else {\n                <ng-content />\n            }\n        </div>\n    </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-background: var(--sys-color-surface-default);--radio-border-color: var(--sys-color-border-interactive-default);--radio-border-color-hover: var(--sys-color-border-interactive-hovered);--radio-border-color-active: var(--sys-color-border-interactive-clicked);--radio-border-color-focus: var(--sys-color-border-interactive-hovered);--radio-indicator-border: var(--sys-color-border-input-default);--radio-indicator-border-hover: var(--sys-color-border-input-hovered);--radio-indicator-border-focus: var(--sys-color-border-input-hovered);--radio-indicator-fill: var(--sys-color-surface-input-active);--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--sys-radius-inner);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):active:not(:focus-within){border-color:var(--radio-border-color-active)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--sys-color-border-interactive-active);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent;--radio-border-color-focus: var(--sys-color-border-interactive-active);border-radius:var(--sys-radius-inner)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active);--radio-border-color-hover: var(--sys-color-border-interactive-active);--radio-border-color-active: var(--sys-color-border-interactive-active);--radio-border-color-focus: var(--sys-color-border-interactive-active);--radio-indicator-border: var(--sys-color-border-input-active);--radio-indicator-border-hover: var(--sys-color-border-input-active);--radio-indicator-border-focus: var(--sys-color-border-input-active)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--sys-color-border-interactive-disabled);--radio-border-color-hover: var(--sys-color-border-interactive-disabled);--radio-border-color-active: var(--sys-color-border-interactive-disabled);--radio-border-color-focus: var(--sys-color-border-interactive-disabled);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--sys-color-surface-input-active-disabled);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active-disabled);--radio-indicator-border: var(--sys-color-border-input-active-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-active-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-active-disabled)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--sys-color-border-featurelock);--radio-border-color-hover: var(--sys-color-border-featurelock);--radio-border-color-active: var(--sys-color-border-featurelock);--radio-border-color-focus: var(--sys-color-border-featurelock);--radio-background: var(--sys-color-surface-featurelock);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--sys-color-icon-featurelock)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--sys-color-surface-input-default);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-disabled)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__content,ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__title,ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__description{color:var(--sys-color-text-interactive-disabled)}ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__title-symbol{color:var(--sys-color-icon-interactive-disabled)}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--sys-color-icon-subtle);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--sys-color-icon-default)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--sys-color-text-secondary)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StatusComponent, selector: "ap-status", inputs: ["color", "dot"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RadioButtonCardComponent, isStandalone: true, selector: "ap-radio-button-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, radioId: { classPropertyName: "radioId", publicName: "radioId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, linkTitle: { classPropertyName: "linkTitle", publicName: "linkTitle", isSignal: true, isRequired: false, transformFunction: null }, titleSymbolId: { classPropertyName: "titleSymbolId", publicName: "titleSymbolId", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, statusBadge: { classPropertyName: "statusBadge", publicName: "statusBadge", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null } }, providers: [withSymbols(apInfo)], ngImport: i0, template: "<div\n    class=\"radio-button-card__container\"\n    [class.radio-button-card__container--default]=\"mode() === 'default'\"\n    [class.radio-button-card__container--card]=\"mode() === 'card'\"\n    [class.radio-button-card__container--locked]=\"featureLocked()\"\n    [class.radio-button-card__container--error]=\"hasError()\"\n    [class.radio-button-card__container--centered]=\"centeredLayout()\">\n    <input\n        type=\"radio\"\n        class=\"radio-button-card__input\"\n        [attr.id]=\"radioId()\"\n        [attr.name]=\"computedName()\"\n        [attr.aria-checked]=\"checked()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        [value]=\"value()\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled() || featureLocked()\"\n        (change)=\"select()\" />\n    <label\n        class=\"radio-button-card__label\"\n        [attr.for]=\"radioId()\">\n        @if (featureLocked()) {\n            <div class=\"radio-button-card__lock-icon\">\n                <ap-symbol symbolId=\"feature-lock\" />\n            </div>\n        } @else {\n            <div class=\"radio-button-card__indicator\">\n                <div class=\"radio-button-card__indicator-outer\">\n                    <div class=\"radio-button-card__indicator-inner\"></div>\n                </div>\n            </div>\n        }\n        <div class=\"radio-button-card__content\">\n            @if (customContentEnabled()) {\n                <div class=\"radio-button-card__structured-content\">\n                    <div class=\"radio-button-card__header\">\n                        <div class=\"radio-button-card__header-left\">\n                            @if (titleSymbolId()) {\n                                <ap-symbol\n                                    class=\"radio-button-card__title-symbol\"\n                                    color=\"grey-blue\"\n                                    [symbolId]=\"titleSymbolId()\" />\n                            }\n                            @if (title()) {\n                                <div class=\"radio-button-card__title\">{{ title() }}</div>\n                            }\n                        </div>\n                        <div class=\"radio-button-card__header-right\">\n                            @if (statusBadge()) {\n                                <ap-status\n                                    class=\"radio-button-card__status\"\n                                    color=\"grey\"\n                                    [dot]=\"false\">\n                                    {{ statusBadge() }}\n                                </ap-status>\n                            }\n                            @if (tooltipText()) {\n                                <ap-symbol\n                                    apTooltipPosition=\"top\"\n                                    class=\"radio-button-card__tooltip-icon\"\n                                    symbolId=\"info\"\n                                    [apTooltip]=\"tooltipText()\" />\n                            }\n                        </div>\n                    </div>\n                    @if (description()) {\n                        <div class=\"radio-button-card__description\">{{ description() }}</div>\n                    }\n                    @if (linkUrl()) {\n                        <a\n                            class=\"standalone radio-button-card__link\"\n                            [href]=\"linkUrl()\"\n                            (click)=\"$event.stopPropagation()\">\n                            {{ linkTitle() }}\n                        </a>\n                    }\n                </div>\n            } @else {\n                <ng-content />\n            }\n        </div>\n    </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-background: var(--ref-color-white);--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-80);--radio-border-color-focus: var(--ref-color-grey-100);--radio-indicator-border: var(--ref-color-grey-60);--radio-indicator-border-hover: var(--ref-color-grey-80);--radio-indicator-border-focus: var(--ref-color-grey-100);--radio-indicator-fill: var(--ref-color-electric-blue-100);--radio-content-opacity: 1;--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--ref-border-radius-md);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: var(--ref-color-electric-blue-100);border-radius:var(--ref-border-radius-md)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--ref-color-electric-blue-100);--radio-border-color-hover: var(--ref-color-electric-blue-100);--radio-border-color-focus: var(--ref-color-electric-blue-100);--radio-indicator-border: var(--ref-color-electric-blue-100);--radio-indicator-border-hover: var(--ref-color-electric-blue-100);--radio-indicator-border-focus: var(--ref-color-electric-blue-100)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-20);--radio-border-color-focus: var(--ref-color-grey-20);--radio-indicator-border: var(--ref-color-grey-40);--radio-indicator-border-hover: var(--ref-color-grey-40);--radio-indicator-border-focus: var(--ref-color-grey-40);--radio-indicator-fill: var(--ref-color-grey-60);--radio-content-opacity: .6;--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--ref-color-purple-20);--radio-border-color-hover: var(--ref-color-purple-20);--radio-border-color-focus: var(--ref-color-purple-20);--radio-background: var(--ref-color-purple-10);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--ref-color-red-100);--radio-border-color-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--ref-color-purple-100)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--ref-color-white);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--ref-color-grey-10)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__content:not(:has(.radio-button-card__structured-content)){opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--ref-color-grey-60);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--ref-color-grey-80)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--ref-color-grey-80);opacity:var(--radio-content-opacity)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StatusComponent, selector: "ap-status", inputs: ["color", "dot"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioButtonCardComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio-button-card', standalone: true, imports: [SymbolComponent, StatusComponent, TooltipDirective], providers: [withSymbols(apInfo)], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"radio-button-card__container\"\n    [class.radio-button-card__container--default]=\"mode() === 'default'\"\n    [class.radio-button-card__container--card]=\"mode() === 'card'\"\n    [class.radio-button-card__container--locked]=\"featureLocked()\"\n    [class.radio-button-card__container--error]=\"hasError()\"\n    [class.radio-button-card__container--centered]=\"centeredLayout()\">\n    <input\n        type=\"radio\"\n        class=\"radio-button-card__input\"\n        [attr.id]=\"radioId()\"\n        [attr.name]=\"computedName()\"\n        [attr.aria-checked]=\"checked()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        [value]=\"value()\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled() || featureLocked()\"\n        (change)=\"select()\" />\n    <label\n        class=\"radio-button-card__label\"\n        [attr.for]=\"radioId()\">\n        @if (featureLocked()) {\n            <div class=\"radio-button-card__lock-icon\">\n                <ap-symbol symbolId=\"feature-lock\" />\n            </div>\n        } @else {\n            <div class=\"radio-button-card__indicator\">\n                <div class=\"radio-button-card__indicator-outer\">\n                    <div class=\"radio-button-card__indicator-inner\"></div>\n                </div>\n            </div>\n        }\n        <div class=\"radio-button-card__content\">\n            @if (customContentEnabled()) {\n                <div class=\"radio-button-card__structured-content\">\n                    <div class=\"radio-button-card__header\">\n                        <div class=\"radio-button-card__header-left\">\n                            @if (titleSymbolId()) {\n                                <ap-symbol\n                                    class=\"radio-button-card__title-symbol\"\n                                    color=\"grey-blue\"\n                                    [symbolId]=\"titleSymbolId()\" />\n                            }\n                            @if (title()) {\n                                <div class=\"radio-button-card__title\">{{ title() }}</div>\n                            }\n                        </div>\n                        <div class=\"radio-button-card__header-right\">\n                            @if (statusBadge()) {\n                                <ap-status\n                                    class=\"radio-button-card__status\"\n                                    color=\"grey\"\n                                    [dot]=\"false\">\n                                    {{ statusBadge() }}\n                                </ap-status>\n                            }\n                            @if (tooltipText()) {\n                                <ap-symbol\n                                    apTooltipPosition=\"top\"\n                                    class=\"radio-button-card__tooltip-icon\"\n                                    symbolId=\"info\"\n                                    [apTooltip]=\"tooltipText()\" />\n                            }\n                        </div>\n                    </div>\n                    @if (description()) {\n                        <div class=\"radio-button-card__description\">{{ description() }}</div>\n                    }\n                    @if (linkUrl()) {\n                        <a\n                            class=\"standalone radio-button-card__link\"\n                            [href]=\"linkUrl()\"\n                            (click)=\"$event.stopPropagation()\">\n                            {{ linkTitle() }}\n                        </a>\n                    }\n                </div>\n            } @else {\n                <ng-content />\n            }\n        </div>\n    </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-background: var(--sys-color-surface-default);--radio-border-color: var(--sys-color-border-interactive-default);--radio-border-color-hover: var(--sys-color-border-interactive-hovered);--radio-border-color-active: var(--sys-color-border-interactive-clicked);--radio-border-color-focus: var(--sys-color-border-interactive-hovered);--radio-indicator-border: var(--sys-color-border-input-default);--radio-indicator-border-hover: var(--sys-color-border-input-hovered);--radio-indicator-border-focus: var(--sys-color-border-input-hovered);--radio-indicator-fill: var(--sys-color-surface-input-active);--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--sys-radius-inner);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):active:not(:focus-within){border-color:var(--radio-border-color-active)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--sys-color-border-interactive-active);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent;--radio-border-color-focus: var(--sys-color-border-interactive-active);border-radius:var(--sys-radius-inner)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active);--radio-border-color-hover: var(--sys-color-border-interactive-active);--radio-border-color-active: var(--sys-color-border-interactive-active);--radio-border-color-focus: var(--sys-color-border-interactive-active);--radio-indicator-border: var(--sys-color-border-input-active);--radio-indicator-border-hover: var(--sys-color-border-input-active);--radio-indicator-border-focus: var(--sys-color-border-input-active)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--sys-color-border-interactive-disabled);--radio-border-color-hover: var(--sys-color-border-interactive-disabled);--radio-border-color-active: var(--sys-color-border-interactive-disabled);--radio-border-color-focus: var(--sys-color-border-interactive-disabled);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--sys-color-surface-input-active-disabled);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active-disabled);--radio-indicator-border: var(--sys-color-border-input-active-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-active-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-active-disabled)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--sys-color-border-featurelock);--radio-border-color-hover: var(--sys-color-border-featurelock);--radio-border-color-active: var(--sys-color-border-featurelock);--radio-border-color-focus: var(--sys-color-border-featurelock);--radio-background: var(--sys-color-surface-featurelock);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--sys-color-icon-featurelock)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--sys-color-surface-input-default);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-disabled)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__content,ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__title,ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__description{color:var(--sys-color-text-interactive-disabled)}ap-radio-button-card .radio-button-card__container:has(input:disabled):not(.radio-button-card__container--locked) .radio-button-card__title-symbol{color:var(--sys-color-icon-interactive-disabled)}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--sys-color-icon-subtle);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--sys-color-icon-default)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--sys-color-text-secondary)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-active: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-active: transparent}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio-button-card', standalone: true, imports: [SymbolComponent, StatusComponent, TooltipDirective], providers: [withSymbols(apInfo)], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"radio-button-card__container\"\n    [class.radio-button-card__container--default]=\"mode() === 'default'\"\n    [class.radio-button-card__container--card]=\"mode() === 'card'\"\n    [class.radio-button-card__container--locked]=\"featureLocked()\"\n    [class.radio-button-card__container--error]=\"hasError()\"\n    [class.radio-button-card__container--centered]=\"centeredLayout()\">\n    <input\n        type=\"radio\"\n        class=\"radio-button-card__input\"\n        [attr.id]=\"radioId()\"\n        [attr.name]=\"computedName()\"\n        [attr.aria-checked]=\"checked()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        [value]=\"value()\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled() || featureLocked()\"\n        (change)=\"select()\" />\n    <label\n        class=\"radio-button-card__label\"\n        [attr.for]=\"radioId()\">\n        @if (featureLocked()) {\n            <div class=\"radio-button-card__lock-icon\">\n                <ap-symbol symbolId=\"feature-lock\" />\n            </div>\n        } @else {\n            <div class=\"radio-button-card__indicator\">\n                <div class=\"radio-button-card__indicator-outer\">\n                    <div class=\"radio-button-card__indicator-inner\"></div>\n                </div>\n            </div>\n        }\n        <div class=\"radio-button-card__content\">\n            @if (customContentEnabled()) {\n                <div class=\"radio-button-card__structured-content\">\n                    <div class=\"radio-button-card__header\">\n                        <div class=\"radio-button-card__header-left\">\n                            @if (titleSymbolId()) {\n                                <ap-symbol\n                                    class=\"radio-button-card__title-symbol\"\n                                    color=\"grey-blue\"\n                                    [symbolId]=\"titleSymbolId()\" />\n                            }\n                            @if (title()) {\n                                <div class=\"radio-button-card__title\">{{ title() }}</div>\n                            }\n                        </div>\n                        <div class=\"radio-button-card__header-right\">\n                            @if (statusBadge()) {\n                                <ap-status\n                                    class=\"radio-button-card__status\"\n                                    color=\"grey\"\n                                    [dot]=\"false\">\n                                    {{ statusBadge() }}\n                                </ap-status>\n                            }\n                            @if (tooltipText()) {\n                                <ap-symbol\n                                    apTooltipPosition=\"top\"\n                                    class=\"radio-button-card__tooltip-icon\"\n                                    symbolId=\"info\"\n                                    [apTooltip]=\"tooltipText()\" />\n                            }\n                        </div>\n                    </div>\n                    @if (description()) {\n                        <div class=\"radio-button-card__description\">{{ description() }}</div>\n                    }\n                    @if (linkUrl()) {\n                        <a\n                            class=\"standalone radio-button-card__link\"\n                            [href]=\"linkUrl()\"\n                            (click)=\"$event.stopPropagation()\">\n                            {{ linkTitle() }}\n                        </a>\n                    }\n                </div>\n            } @else {\n                <ng-content />\n            }\n        </div>\n    </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-background: var(--ref-color-white);--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-80);--radio-border-color-focus: var(--ref-color-grey-100);--radio-indicator-border: var(--ref-color-grey-60);--radio-indicator-border-hover: var(--ref-color-grey-80);--radio-indicator-border-focus: var(--ref-color-grey-100);--radio-indicator-fill: var(--ref-color-electric-blue-100);--radio-content-opacity: 1;--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--ref-border-radius-md);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: var(--ref-color-electric-blue-100);border-radius:var(--ref-border-radius-md)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--ref-color-electric-blue-100);--radio-border-color-hover: var(--ref-color-electric-blue-100);--radio-border-color-focus: var(--ref-color-electric-blue-100);--radio-indicator-border: var(--ref-color-electric-blue-100);--radio-indicator-border-hover: var(--ref-color-electric-blue-100);--radio-indicator-border-focus: var(--ref-color-electric-blue-100)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-20);--radio-border-color-focus: var(--ref-color-grey-20);--radio-indicator-border: var(--ref-color-grey-40);--radio-indicator-border-hover: var(--ref-color-grey-40);--radio-indicator-border-focus: var(--ref-color-grey-40);--radio-indicator-fill: var(--ref-color-grey-60);--radio-content-opacity: .6;--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--ref-color-purple-20);--radio-border-color-hover: var(--ref-color-purple-20);--radio-border-color-focus: var(--ref-color-purple-20);--radio-background: var(--ref-color-purple-10);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--ref-color-red-100);--radio-border-color-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--ref-color-purple-100)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--ref-color-white);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--ref-color-grey-10)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__content:not(:has(.radio-button-card__structured-content)){opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--ref-color-grey-60);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--ref-color-grey-80)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--ref-color-grey-80);opacity:var(--radio-content-opacity)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], radioId: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], linkUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkUrl", required: false }] }], linkTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTitle", required: false }] }], titleSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleSymbolId", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], statusBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBadge", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], featureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLocked", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }] } });
 /**

package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-radio-button-card.mjs","sources":["../../../libs/ui-components/radio-button-card/src/radio-button-card.component.ts","../../../libs/ui-components/radio-button-card/src/radio-button-card.component.html","../../../libs/ui-components/radio-button-card/src/agorapulse-ui-components-radio-button-card.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { StatusComponent } from '@agorapulse/ui-components/status';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apInfo, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio-button-card',\n styleUrls: ['./radio-button-card.component.scss'],\n standalone: true,\n imports: [SymbolComponent, StatusComponent, TooltipDirective],\n providers: [withSymbols(apInfo)],\n templateUrl: './radio-button-card.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioButtonCardComponent implements ControlValueAccessor {\n private static nextId = 0;\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private readonly ngControl = inject(NgControl, { optional: true, self: true });\n\n // Accessibility inputs\n readonly ariaLabel = input<string>('');\n readonly ariaLabelledby = input<string \| null>(null);\n readonly ariaDescribedby = input<string>('');\n\n // Basic configuration inputs\n readonly disabled = input(false);\n readonly radioId = input<string>(`ap-radio-button-${RadioButtonCardComponent.nextId++}`);\n readonly value = input.required<string>();\n readonly name = input<string>('');\n\n // Card mode content inputs\n readonly title = input<string>('');\n readonly description = input<string>('');\n readonly linkUrl = input<string>('');\n readonly linkTitle = input<string>('');\n readonly titleSymbolId = input<string>('');\n readonly tooltipText = input<string>('');\n readonly statusBadge = input<string>('');\n\n // Display and state inputs\n readonly mode = input<'default' \| 'card'>('card');\n readonly featureLocked = input(false);\n readonly hasError = input(false);\n // Vertically centers the content within the card height.\n readonly centered = input(false);\n\n // Internal state signals\n readonly checked = signal(false);\n readonly computedName = computed(() => {\n return this.name() \|\| this.ngControl?.name \|\| '';\n });\n\n readonly customContentEnabled = computed(() => {\n return this.title() \|\| this.titleSymbolId() \|\| this.statusBadge() \|\| this.tooltipText() \|\| this.description() \|\| this.linkUrl();\n });\n\n // True when the card content should be vertically centered: explicitly opted in via centered,\n // or a structured single-row card (no description or link) that centers automatically.\n readonly centeredLayout = computed(() => {\n return this.centered() \|\| (Boolean(this.customContentEnabled()) && !this.description() && !this.linkUrl());\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set valueAccessor to avoid Angular error\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n select() {\n const currentValue = this.value();\n this.checked.set(true);\n this.onModelChange(currentValue);\n }\n\n writeValue(value: unknown): void {\n const currentValue = this.value();\n const shouldBeChecked = value == currentValue;\n this.checked.set(shouldBeChecked);\n }\n\n onModelChange: (value: unknown) => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n onModelTouched: () => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n registerOnChange(fn: () => void): void {\n this.onModelChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onModelTouched = fn;\n }\n}\n","<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\"\n [class.radio-button-card__container--centered]=\"centeredLayout()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() \|\| featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\n </label>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-radio-button-card.mjs","sources":["../../../libs/ui-components/radio-button-card/src/radio-button-card.component.ts","../../../libs/ui-components/radio-button-card/src/radio-button-card.component.html","../../../libs/ui-components/radio-button-card/src/agorapulse-ui-components-radio-button-card.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { StatusComponent } from '@agorapulse/ui-components/status';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apInfo, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio-button-card',\n styleUrls: ['./radio-button-card.component.scss'],\n standalone: true,\n imports: [SymbolComponent, StatusComponent, TooltipDirective],\n providers: [withSymbols(apInfo)],\n templateUrl: './radio-button-card.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioButtonCardComponent implements ControlValueAccessor {\n private static nextId = 0;\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private readonly ngControl = inject(NgControl, { optional: true, self: true });\n\n // Accessibility inputs\n readonly ariaLabel = input<string>('');\n readonly ariaLabelledby = input<string \| null>(null);\n readonly ariaDescribedby = input<string>('');\n\n // Basic configuration inputs\n readonly disabled = input(false);\n readonly radioId = input<string>(`ap-radio-button-${RadioButtonCardComponent.nextId++}`);\n readonly value = input.required<string>();\n readonly name = input<string>('');\n\n // Card mode content inputs\n readonly title = input<string>('');\n readonly description = input<string>('');\n readonly linkUrl = input<string>('');\n readonly linkTitle = input<string>('');\n readonly titleSymbolId = input<string>('');\n readonly tooltipText = input<string>('');\n readonly statusBadge = input<string>('');\n\n // Display and state inputs\n readonly mode = input<'default' \| 'card'>('card');\n readonly featureLocked = input(false);\n readonly hasError = input(false);\n // Vertically centers the content within the card height.\n readonly centered = input(false);\n\n // Internal state signals\n readonly checked = signal(false);\n readonly computedName = computed(() => {\n return this.name() \|\| this.ngControl?.name \|\| '';\n });\n\n readonly customContentEnabled = computed(() => {\n return this.title() \|\| this.titleSymbolId() \|\| this.statusBadge() \|\| this.tooltipText() \|\| this.description() \|\| this.linkUrl();\n });\n\n // True when the card content should be vertically centered: explicitly opted in via centered,\n // or a structured single-row card (no description or link) that centers automatically.\n readonly centeredLayout = computed(() => {\n return this.centered() \|\| (Boolean(this.customContentEnabled()) && !this.description() && !this.linkUrl());\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set valueAccessor to avoid Angular error\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n select() {\n const currentValue = this.value();\n this.checked.set(true);\n this.onModelChange(currentValue);\n }\n\n writeValue(value: unknown): void {\n const currentValue = this.value();\n const shouldBeChecked = value == currentValue;\n this.checked.set(shouldBeChecked);\n }\n\n onModelChange: (value: unknown) => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n onModelTouched: () => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n registerOnChange(fn: () => void): void {\n this.onModelChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onModelTouched = fn;\n }\n}\n","<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\"\n [class.radio-button-card__container--centered]=\"centeredLayout()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() \|\| featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\n </label>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-radio.mjs CHANGED Viewed

@@ -264,11 +264,11 @@ class RadioComponent {
         `);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "ap-radio", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"radio-button-container\"\n    [class.required]=\"required\"\n    [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div\n        class=\"radio-button\"\n        [class.disabled]=\"disabled\"\n        (click)=\"select($event)\"></div>\n    <label\n        [for]=\"inputId\"\n        (click)=\"select($event)\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-input-active);box-shadow:inset 0 0 0 3px var(--sys-color-surface-interactive-default)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-border-input-active-disabled);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--sys-color-border-input-active)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--sys-color-border-input-hovered);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-active);box-shadow:inset 0 0 0 16px var(--sys-color-surface-interactive-default);transition:box-shadow var(--sys-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-error);background:var(--sys-color-icon-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--sys-color-border-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "ap-radio", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"radio-button-container\"\n    [class.required]=\"required\"\n    [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div\n        class=\"radio-button\"\n        [class.disabled]=\"disabled\"\n        (click)=\"select($event)\"></div>\n    <label\n        [for]=\"inputId\"\n        (click)=\"select($event)\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 3px var(--ref-color-white)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--ref-color-grey-10)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--ref-color-electric-blue-100)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--ref-color-grey-10);border-color:var(--ref-color-grey-20)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--ref-color-grey-60)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--ref-color-grey-80);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--ref-color-grey-60);background:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 16px var(--ref-color-white);transition:box-shadow var(--comp-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--ref-color-grey-80)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--ref-color-grey-60)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--ref-color-red-100)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--ref-color-red-60)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--ref-color-red-60)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio', standalone: true, providers: [RADIO_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"radio-button-container\"\n    [class.required]=\"required\"\n    [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div\n        class=\"radio-button\"\n        [class.disabled]=\"disabled\"\n        (click)=\"select($event)\"></div>\n    <label\n        [for]=\"inputId\"\n        (click)=\"select($event)\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-input-active);box-shadow:inset 0 0 0 3px var(--sys-color-surface-interactive-default)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-border-input-active-disabled);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--sys-color-border-input-active)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--sys-color-border-input-hovered);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-active);box-shadow:inset 0 0 0 16px var(--sys-color-surface-interactive-default);transition:box-shadow var(--sys-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-error);background:var(--sys-color-icon-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--sys-color-border-error)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio', standalone: true, providers: [RADIO_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"radio-button-container\"\n    [class.required]=\"required\"\n    [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div\n        class=\"radio-button\"\n        [class.disabled]=\"disabled\"\n        (click)=\"select($event)\"></div>\n    <label\n        [for]=\"inputId\"\n        (click)=\"select($event)\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 3px var(--ref-color-white)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--ref-color-grey-10)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--ref-color-electric-blue-100)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--ref-color-grey-10);border-color:var(--ref-color-grey-20)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--ref-color-grey-60)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--ref-color-grey-80);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--ref-color-grey-60);background:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 16px var(--ref-color-white);transition:box-shadow var(--comp-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--ref-color-grey-80)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--ref-color-grey-60)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--ref-color-red-100)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--ref-color-red-60)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--ref-color-red-60)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['input', { static: true }]